jquery события нескольких кликов по анимированному div

Question

То, чего я хочу достичь, это анимировать div вверх и вниз до следующего клика, пока он не остановится, и дождаться следующего клика, чтобы снова начать анимацию.

http://jsfiddle.net/WwJRD/

это функция, оживляющая мой div:

function upAndDown(element,x) {

    $(element).animate({'top':'+='+x+'px'}, 'slow')
    .animate({'top':'-='+x+'px'}, 'slow',function(){upAndDown(element,x)});
};

$('.clickThis').click(function(){
    upAndDown('.moveThis',50);
});

Я действительно не знаю, как получить то, что я хочу!

Спасибо

Answer 1

Это на самом деле немного сложно, потому что у вас есть несколько анимаций в очереди и обратный вызов.

Проблема в том, что если вы просто stop, а затем позвоните upAndDown, вы начнете анимацию стекущая позиция, то есть вы можете периодически перемещаться по странице.Вы также не можете jumpToEnd в вызове stop(), потому что вы все равно будете вызывать обратный вызов.

Я исправил это, добавив класс moving, когда (соответственно) объект перемещается.Это используется в обратном вызове, чтобы решить, следует ли продолжать анимацию.

В итоге вы получите следующее:

http://jsfiddle.net/EkpNK/

Теперь, это продолжает анимацию, пока не завершит цикл,Если вы хотите, чтобы он немедленно прекратился, вы можете дважды вызвать .stop(false, true), чтобы остановить обе анимации и вернуться к исходному месту:

http://jsfiddle.net/EkpNK/1/

Если вы хотите остановиться на месте ипродолжить с того места, где вы остановились, потребуется дополнительный код.

Answer 2

Мое решение очень похоже на решение Джеффа Б., но делает вещи (IMO) немного чище и использует функцию jQuery.data () для хранения флага «анимации» вместо добавления / удаления классов:

http://jsfiddle.net/HnK98/