Question

我有这个基本的JQuery代码，我正在进行一些测试，以便学习并在项目中包含类似的内容，更改：

$("#content").on('scroll',function(event){

     if($(this).scrollTop() > 50) {
    $('#content img').animate({'top':'-100px'},2000);
     }
      if($(this).scrollTop() < 50) {
        $('#content img').animate({'top':'+100px'},2000);
       }
});

我的实际问题是，例如，在向下滚动时，通过将图像向下移动到100px可以正常设置动画。到现在为止还挺好。但是如果再次向下滚动......它不会再次发生，它只是像普通的html一样滚动。

在第一个被触发后，是否有任何方法可以让缓慢的动作再次准备就绪？

Answer 1

解决了这个问题，我不得不做自己的小提琴（不完全是你想要的，但修复方法仍然独立）。

要解决此问题，请使用+ =和 - =代替+和 -

$('#content img').animate({'top':'-=100px'},2000);

和

$('#content img').animate({'top':'+=100px'},2000);

如果感兴趣的话，我包括了我曾经测试的小提琴

My Fiddle is a little different, but it still works multiple times

更新

var newTop = $('img').offset().top - $(window).scrollTop();
var newBottom = newTop + $('img').height();

Jquery动画准备好再次触发

1 个答案: