jQuery - 上下滚动动画并带有缓动效果？答案

【问题标题】：jQuery - animate on scroll up and down with easing effect?jQuery - 上下滚动动画并带有缓动效果？
【发布时间】：2017-11-30 13:22:31
【问题描述】：

我想在向下和向上滚动页面时为元素设置动画：

$(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/>

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

有什么想法吗？

【问题讨论】：

我观察到的是，半秒后，动画完成滚动的每一步。所以当scrollTop 返回 0, 1, 2, 3.... 时，每一步都会触发动画。使用 10.5 乘数，则为 0, 10.5, 21, 31.5.... 所以动画可以将 p 移出屏幕 30+ 步。并且需要一段时间，因为每一步动画都必须完成才能激活下一步。
如果你把 10.5 拿出来，你会更容易看到这个：jsfiddle.net/Twisty/Lq73wkpm/1

标签： jquery jquery-ui animation jquery-animate jquery-easing

【解决方案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() detect when user stops scrolling

【讨论】：