jquery スクロールするとフェードイン上手くいかない。

jquery　スクロールするとフェードインする手法を行おうとしましたが、上手くいきませんでした。

問題点はスクロールすると全ての画像が同時に表示されてしまう事です。

コードは下記です。

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="css/style.css" rel="stylesheet">
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVU="crossorigin="anonymous"></script>
  <script src="js/scroll.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="box red">
     <img src="img/s1.jpg" alt="">
     <p>block1</p>
    </div>
    <div class="box blue">
     <img src="img/s2.jpg" alt="">
     <p>block2</p>
    </div>
    <div class="box yel">
     <img src="img/s3.jpg" alt="">
     <p>block3</p>
    </div>
    <div class="box grn">
     <img src="img/s4.jpg" alt="">
     <p>block4</p>
    </div>
  </div>
  
</body>
</html>

css

@charset utf-8;

.wrapper {
  width: 900px;
  margin: 0 auto;
}

.box {
  text-align: center;
  padding: 100px 0;
}

.box img {
  width: 300px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yel {
  background-color: yellow
    ;
}

.grn {
  background-color: green;
}

$(function(){


  

  var boxcss = {
      visibility:"hidden",
      opacity:"0"
  };
  
  $(".box img").css(boxcss);
  
     //on（イベント）後から追加したdomも取得する。また複数イベントを設定できる。
     //.each(function(){ここの中で繰り返し｝
    
  $(window).on("scroll", function(){
    $(".box img").each(function(){
      var imgPos = $(this).offset().top; //window上から.boxまでの距離
      var scroll = $(window).scrollTop();//スクロールした分量
      var windowHeight = $(window).height();//windowの高さ
      if(scroll > imgPos - windowHeight + windowHeight / 5){
          $(".box img").css("visibility","visible")
          $(".box img").animate({opacity:1},500);
      }
      
   
  });
  
   
  
  
  });
  });

miyabi_pudding

2019/06/22 14:08

スクリーンですか？スクロールですか？タイトルも含め、統一をお願いします。文脈から、スクロールだとお見受けしますが、見た方を混乱させるものであると、回答がつきにくくなると思います。

8888

2019/06/22 14:44 編集

ご指摘ありがとうございます。誤字です。

行動規範の内容に同意します

回答2件

とりあえずこうでは？

js
1    $(".box img").each(function(){
2      var imgPos = $(this).offset().top; //window上から.boxまでの距離
3      var scroll = $(window).scrollTop();//スクロールした分量
4      var windowHeight = $(window).height();//windowの高さ
5      if(scroll > imgPos - windowHeight + windowHeight / 5){
6        //$(".box img").css("visibility","visible")
7          $(this).css("visibility","visible")
8        //$(".box img").animate({opacity:1},500);
9          $(this).animate({opacity:1},500);
10      }
11  });

投稿2019/06/22 14:47

kei344

総合スコア69398

8888

2019/06/22 14:53

回答ありがとうございます。 thisにするという事ですね。一度試してみます。

8888

2019/06/22 15:03

試しましたが、thisはwindowになるようです。

kei344

2019/06/22 15:05

> 試しましたが、thisはwindowになるようです。どのように確認されたかわかりませんが、とても不思議な挙動ですね。

kei344

2019/06/22 15:13

https://jsfiddle.net/kztp78vf/

8888

2019/06/22 15:44

おー上手くいってますね。あとで調べ直したらimgは取れているようです。 eachの外でconsole.logしてました。ただ自分の環境だと上手く行きませんでした。変わらず同時です。単純に画面を読み取るのが遅くてカクカクしてるだけでしょうか? それともファーストビューに最初からあると機能しないのでしょうか？

kei344

2019/06/22 16:00

> ファーストビューに最初からあると機能しないのでしょうか？そりゃスクロールイベントが起きるまで処理されませんから。 https://jsfiddle.net/kugsv7nz/

8888

2019/06/23 04:19 編集

いえ、そういう事では無く。同時に発生してしまう事です。

kei344

2019/06/23 04:32

画面に表示されたらその画面内の全アイテムが表示されるように組まれているからそうなりますね。

8888

2019/06/23 05:37

すみません。説明の仕方悪かったかと思いますので整理します。 keiさんのは一つずつ.box imgの1/5 がwindowsの領域に入ったら下記が .css("visibility","visible") .animate({opacity:1},500); が効いています。ですが、自分の場合領域に入っていないアイテムも全て同時に表示されます。

kei344

2019/06/23 05:42

提示されたコードと本体のコードが違いすぎるのでは。こちらが回答してからもコードを書き換えられているようですが、特にそれには対応しません。あと、適当に他人のハンドルネームを略さないでください。

8888

2019/06/23 05:53

中身はthis以外は変更していません。書き換えたのは中身を綺麗にしたりしただけです。内容見て頂ければ分かると思います。略して事について不快に思われたようでしたらすみません。ありがとうございました。

miyabi_pudding

2019/06/23 17:31 編集

横槍失礼します。 key344さんのご回答通り、 if(scroll > imgPos - windowHeight + windowHeight / 5){ //$(".box img").css("visibility","visible") $(this).css("visibility","visible") //$(".box img").animate({opacity:1},500); $(this).animate({opacity:1},500); } の、部分の、.css("visibility","visible")と、.animate({opacity:1},500);を $(this)に対して効かせても、全て同時に表示されてしまう、ということですか？また、全ての画像が、ファーストビュー領域内に存在しているってことはないでしょうか？

8888

2019/06/24 10:38

すみません。回答ありがとうございます。なんとかなるかもなので自分で解決します。

行動規範の内容に同意します