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 方法似乎无法做到这一点，所以我尝试使用动画方法：

$(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() detect when user stops scrolling

jQuery - 使用缓动效果上下滚动动画？

jQuery - animate on scroll up and down with easing effect?

jquery-ui

animation

jquery-animate

jquery-easing