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

Question

我有这个代码

.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示例

Answer 1

只是一些代码，还没有测试过，但是我希望它接近您的期望，每当滚动页面时，都使用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位置，我希望它可以工作。