javascript - 如何使用jQuery更改动画速度？

我有这个代码

.test2{
transition: 10s;
}

js

window.onscroll = function() {
  $( ".test2" ).animate({
  top: -s-100 }, 0, "linear");
  }

要么

window.onscroll = function() {
  $('.test2').css('transition',  0);
  $('.test2').css('transition',  "");
  }

但是什么也没发生。应该是在以下情况下我用滚轮向下滚动页面或在滚动条上单击鼠标：0s;但是当我停止这样做的那一刻。然后过渡立即变为10s
当您单击按钮时，动画应该是平滑的。

可以做这样的事情吗？

Codepen示例

最佳答案

只是一些代码，还没有测试过，但是我希望它与您要查找的内容接近，每当滚动页面时，都使用offset()检索顶部位置。

并设置xtop变量，然后在每次页面滚动时调用doAnimation()，但请记住在每个对象上调用stop()方法，因此动画缓存不会提示并降低系统速度。

var xtop;

window.onScroll = function(){
    xtop = $(window).offset().top; //get the top position.
    doAnimation();
}

function doAnimation(){
   $(".test2").stop().animate({top: xtop}, 10000, "linear");
}

每当您停止滚动时，对象都会在10秒（10000毫秒）内动画到xtop位置，我希望它可以工作。