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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

6437閲覧

JQUERYの.each()の使い方と、動かない理由がわかりません。

TChanger

総合スコア69

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2015/04/21 10:33

ページをスクロールすると、opacityで隠れているdivを表示させるというソースを見つけました。
そのソースをコピペしただけで上手く動いたのですが、
わからない所があるので質問させていただきました。

lang

1//スクロール時のコンテンツ表示 2var setElm = $('.scrEvent'), 3 delayHeight = 120; 4setElm.css({display:'block',opacity:'0'}); 5// setElm.hide(); 6 7$(window).on('load scroll resize', function(){ 8 setElm.each(function(){ 9 var setThis = $(this), 10 elmTop =setThis.offset().top, 11 elmHeight =setThis.height(), 12 scrTop = $(window).scrollTop(), 13 winHeight = $(window).height(); 14 if (scrTop > elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight) { 15 setThis.stop().animate({opacity:'1'},500); 16// setThis.fadeIn(); 17 } else if (scrTop < elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight){ 18 setThis.stop().animate({opacity:'0'},500); 19// setThis.fadeIn(); 20 } 21 }); 22}); 23} 24 25

このようなソースなのですが、
最初の行で、変数にあるセレクタを格納していて、
複数のdivに同じ名前が付いていて、それを.each()を使うことで
同じクラス名でも上から順に指定ポイントまで来たときに表示される
という認識でいるのですが、
これをanimateでなく、
単純にコメントアウトしている部分のように、fadeIn()を使ってみたのですが
動きませんでした。

どの理由で動かないのかがわかりません。
.each()の認識はこれであっているのかわからず、質問させていただきました。
(JsSTUDIOなどを見たのですが、初心者過ぎて意味が分かりずらかったのです。)

どうぞよろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

もう解決されたかもしれませんが、一応 知識の整理のために まとめておきましょう。

  1. 「複数のdivに同じ名前が付いて」
    「名前」はこの文脈では不正確で、class属性が同じ "scrEvent"、ということですね。
    class, id, name の各属性はそれぞれ違う目的で使われますので整理してください。

  2. each() の理解
    これは jQueryのメソッドで、質問者の方の理解であっています。

  3. hide と fadeIn の組み合わせではうまくいかないのはなぜか。
    hide したとき、displayを'none' にするのですが、
    このとき、offsetメソッドの返り値の offset().top が
    windowの screenTopと同じ値を示す、ということがあり、
    縦座標の位置関係がうまくとれないのが問題です。
    ですから、elmTop を、たとえば

lang

1 elmTop = parseInt(setThis.css('top'), 10),
としてやればある程度動きます。
  1. hideでなく、css opacity:0 と fadeInの組み合わせでうまくいかないのはなぜか。
    これは簡単で、fadeInする対象は display:noneであることが必要だからですね。
    不透明度が0なだけで、すでに表示されているので、fadeIn済み、だからですね。

opacity:0 と display:none と visibility:hidden は 「見えない」という点では
同じですが、それぞれ扱いが違いますので注意が必要です。
jQuery の hide や show や fadeInが何をしているかを デバッガ上で見ておくと、
必ず後々ためになりますので やってみるとよいでしょう。

投稿2015/05/10 08:52

okayu3

総合スコア200

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

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

TChanger

2015/05/11 10:28

すごく丁寧なご回答をしていただき感謝いたします! メソッドのもつ動きを詳しく教えてくださり、とても勉強になりました。 ありがとうございます。
guest

0

いろいろとおかしいところだらけなので、実際のコード全部がないと、どのように動かないのか分からないのですが、第一段階として、

if (scrTop > elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight) { setThis.stop().animate({opacity:'1'},500); // setThis.fadeIn(); ←ここ } else if (scrTop < elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight){ setThis.stop().animate({opacity:'0'},500); // setThis.fadeIn(); ←ここ }

両方ともfadeIn()では、絶対に消えませんね。

投稿2015/04/21 11:39

編集2015/04/21 11:40
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

TChanger

2015/05/11 10:31

ご回答いただきましてありがとうございました! 私の質問の仕方が悪かったです。 「animateの代わりにfadeInを使う」という内容でした。 申し訳ありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問