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');
      }
   }
});

告诉我它是否有效！：）

滚动窗口无需滚动即可调用

1 个答案: