スクロールのウィンドウスクロールせずに呼び出す

Question

スクロールのコンテンツをアニメーション化するためのスクリプトがあります。しかし、私は実際のスクロールをせずにこのスクリプトを起動しています。それは2回呼び出すことによってアニメーションに影響を与えます。そして、私のBlockは不透明度が0から1に2回変化し、振動するように見えます。出力のための

.service-item { 
    display: block; 
    min-height: 175px; 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
    background: #fff; 
    top: 0; 
    opacity:0; 
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); 
    border-radius: 5px; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
} 


$(window).scroll(function(e) { 
    console.log(e); 
    if(windowBottom > $('#services').offset().top+100) { 
     $('.services .container').addClass("fadeInUp").addClass("animated"); 
     var delay = 0; 
     $('.service-item').each(function(){ 
      var portfolioImageOffset = $(this).offset().top; 
      if(portfolioImageOffset < windowBottom) { 
       $(this).delay(delay).animate({ 
        opacity:1 
       },200); 
       delay += 200; 
      } 
     }); 
    } 
} 

：http://ldrp.890m.com/personalに移動し、サービスや私たちの仕事のセクションまでスクロールします。

Answer 1

$('.service-item').each()関数では、既にアニメーション化されているかどうかを確認するデータを追加しようとする可能性があります。ように：

$('.service-item').each(function(){ 
    if($(this).data('animated') != 'animated') { 
     var portfolioImageOffset = $(this).offset().top; 
     if(portfolioImageOffset < windowBottom) { 
     $(this).delay(delay).animate({ 
      opacity:1 
     },200); 
     delay += 200; 
     $(this).data('animated','animated'); 
     } 
    } 
}); 

どうすればいいですか？ :)