質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

524閲覧

isInViewの動作が行われない

usa-hiro

総合スコア5

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/04/25 10:37

編集2022/04/27 11:08

画面領域に入ったときに、隠れていたdiv要素がスライドして表示される動作を作りたいのですが、画面領域に入っても動作しません。jqueryのコードを書くところにevent,thisがanyと表示されます。

コード ```<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BBB英会話スクール</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <meta name="vieWport" content="width=device-width,initial-scale=1"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="js/jquery.inview.min.js"></script> <script src="js/jquery.js"></script> </head> <body> <div class="online inview fadeIn-left"> <img src="img/img06.png" alt="オンライン対応"> <div class="onlien-text"> <h3>オンライン対応</h3> <p>24時間いつでも受講できる!</p> </div> </div> </body> css .online{ display: flex; justify-content: center; align-items: center; width: 635px; height: 200px; background-color: white; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } h3{ font-size: 25px; color: #FF3939; } .online p{ font-size: 15px; } .online img{ width: 85px; height: 60px; margin-right: 35px; } .fadeIn-left{ opacity: 0; transform: translate(-100%, 0); transition: .7s; } .is-show{ transform: translate(0, 0); opacity: 1; } jQuery $(function(){ $('.inview').on('inview' ,function(event,isInView){ if(isInView){ $(this).stop().addClass('is-show'); }else{ $(this).stop().removeClass('is-show'); } }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usa-hiro

2022/04/26 13:19

一番下のurlを貼り付けました。
guest

回答1

0

ベストアンサー

translate(-100%, 0)で常にスクリーン外にあるので、スクロールしても画面領域に入ってこず、イベントが起きないのだと思います。

css

1 .fadeIn-left { 2 opacity: 0; 3 /* transform: translate(-100%, 0); */ 4 transform: translate(-99%, 0); 5 transition: .7s; 6 }

投稿2022/04/27 02:08

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問