我有这个代码

.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位置,我希望它可以工作。

10-07 20:36