jQuery的動畫準備好再次觸發

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

UPDATE

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