滾動窗口不滾動而調用

Question

我有一個腳本，用於使滾動內容動畫化。 但是我沒有實際滾動就觸發了該腳本。 調用2次會影響動畫。 我的方塊從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');
      }
   }
});

告訴我是否可行！ :)