Javascript остановка анимации при прокрутке останавливается

Question

Я пытаюсь играть в анимацию, пока пользователь прокручивается и останавливается, когда останавливается.
Я знаю очень маленький javascript, но из охоты вокруг и адаптации я дошел до того, что начал его прокрутку, но потом он продолжает идти, и я не могу понять, как остановить его, как только прокрутка заканчивается ,

Вот что я до сих пор:

$(window).scroll(function() { 
    $('#square').animate({ 
     top: '70px', 
     queue: true, 
    }, 900).animate({ 
     top: '5px', 
     queue: true 
    }, 1000); 
}); 

Fiddle

Любая помощь очень ценится!

Answer 1

Вы можете использовать таймер следующим образом:

var timer;

$(window).scroll(function() { 

    clearTimeout(timer); 
    timer = setTimeout(refresh , 150); 

    $('#square').animate({ 
     top: '70px', 
     queue: true, 
    }, 900).animate({ 
     top: '5px', 
     queue: true 
    }, 1000); 

}); 

var refresh = function() { 
// do stuff 
    $('#square').stop().clearQueue(); 
}; 

FIDDLE

Ссылка: Event when user stops scrolling

Answer 2

Я совершил это с дребезга Underscore и JQuery:

https://github.com/michaelBenin/node-startup/blob/master/client/js/core/scroll_manager.js

Чтобы остановить анимацию см: http://api.jquery.com/stop/

Также см этой библиотеки для анимации: http://julian.com/research/velocity/

Answer 3

Обновлен своей JSFiddle используя ссылку с другого Stack Overflow question.

Это будет отображаться на экране при возникновении события scroll и при прекращении события scroll.

Ядро того, что вы хотите, это $('#square').stop().clearQueue();.