jQuery-在向上和向下滚动时具有动画效果吗？

Question

当我上下滚动页面时，我想为元素设置动画：

 $(document).ready(function(){ $(window).scroll(function(){ $('p').each(function(r){ var scrolled = $(window).scrollTop(); $(this).css('top', (scrolled * 2.5) + 'px'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <p style="position:relative">This is a paragraph.</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 

但我想在此之上添加放松效果。 CSS方法似乎没有做到这一点，所以我尝试了animate方法：

 $(document).ready(function(){ $(window).scroll(function(){ $('p').each(function(r){ var scrolled = $(window).scrollTop(); $(this).animate({top: (scrolled * 10.5) + 'px'}, 600, 'easeOutExpo', function () { // }) }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <p style="position:relative">This is a paragraph.</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 

但是，当我稍微滚动页面时，它似乎处于无限动画循环中。

有任何想法吗？

Answer 1

一种帮助方法是使用mod， % ，运算符条件，以免使每个滚动动作都没有动画效果。

https://jsfiddle.net/Twisty/Lq73wkpm/2/

的JavaScript

$(function() {
  $(window).scroll(function() {
    $('p').each(function(r) {
      var scrolled = $(window).scrollTop();
      console.log("Scroll Top: " + scrolled);
      if (scrolled % 10 == 0) {
        console.log("Animate: " + scrolled);
        $(this).animate({
            top: scrolled + 'px'
          },
          600,
          'easeOutExpo',
          function() {
            //
          });
      }
    });
  });
});

还是有点笨拙。

您的另一个选择是检查用户不再滚动，然后跳到屏幕上的该位置： jQuery scroll（）检测用户何时停止滚动