Как удалить предыдущую анимацию и запустить новую?

Question

[Isaac Clark]

Здравствуйте. Подскажите пожалуйста.

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

Если я нажимаю на кнопку 2 раза, то включается вторая анимация, но если первая не проиграла до конца, то она продолжает работать параллельно со-второй, пока не проиграет.

Вопрос: как сделать, чтоб при следующем включении анимации, предыдущая не срабатывала, а если я не нажал второй раз на кнопку, то первая анимация доиграла до конца?

Comments

[Isaac Clark]

уже написал для каждого элемента
$('div.line1:animated').stop(true,true); $('div.line2:animated').stop(true,true); $('div.line3:animated').stop(true,true); $('div.line4:animated').stop(true,true); $('div.line5:animated').stop(true,true);
все равно не работает :(

Answer 1

[Денис Инешин]

Можно сделать следующим образом:

1. Ввести переменную, скажем isAnimation = false;
2. При нажатии на кнопку, проверять состояние этой переменной: if(!isAnimation) playMyAnimation();
3. В функции playMyAnimation сходу присваиваем этой переменной true;
4. В jquery animate есть метод complete, который вызывается, когда анимация закончилась. Соответственно в этом методе, присваиваем isAnimation = false снова.
5. Profit!

Ну и пример: jsfiddle.net/wzdmb/

Answer 2

[imater]

Используйте функцию stop():
jquery-docs.ru/effects/stop/

$("#go").click(function(){
      $(".block").stop().animate({left: '+=100px'}, 2000);
    });

Comments

[Isaac Clark]

сделал вот так $(this).stop(true); в таком случае у меня анимация запускаться стала не поочередно для каждого элемента из набора с задержкой, а ОДНОВРЕМЕННО

[imater]

Если вам нужно сначала 1ю анимацию, а потом проиграть вторую, то вставьте функцию, которая исполнится только после того, как сработает первая.

$("#go").click(function(){
      $(".block").stop().animate({left: '+=100px'}, function() { $(this).animate({ left: '-=100px' },2000) }, 2000);
    });

[Isaac Clark]

если я нажму на кнопку, то должна сработать вторая, а первая отключится, в не зависимости от того, проиграла она до конца или нет

Answer 3

[Talyutin]

api.jquery.com/finish/

Comments

[Isaac Clark]

выдает ошибку TypeError: $(...).clearQueue(...).finish is not a function
пишу вот так $('div.line1').clearQueue().finish();

[Talyutin]

А версия jQuery какая? Функция finish() в 1.9 добавлена.

[Isaac Clark]

версия 1.7 к сожалению, поменять не получится, какие есть еще варианты подскажите пожалуйста?

[Isaac Clark]

ну а если так написать? $('div.line1').clearQueue().stop(); в чем будет разница, я так понимаю, что результат будет тот же?