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

Question

Isaac Clark @Dark_Knight

Game Dev

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

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

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

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

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

Вопрос задан более трёх лет назад
4460 просмотров

1 комментарий

Подписаться 4 Оценить 1 комментарий

Пригласить эксперта

Ответы на вопрос 3

Комментировать

3 комментария

Isaac Clark @Dark_Knight Автор вопроса

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

Написано более трёх лет назад
imater @imater
Если вам нужно сначала 1ю анимацию, а потом проиграть вторую, то вставьте функцию, которая исполнится только после того, как сработает первая.

$("#go").click(function(){ $(".block").stop().animate({left: '+=100px'}, function() { $(this).animate({ left: '-=100px' },2000) }, 2000); });
Написано более трёх лет назад
Isaac Clark @Dark_Knight Автор вопроса

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

Написано более трёх лет назад

4 комментария

Isaac Clark @Dark_Knight Автор вопроса

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

Написано более трёх лет назад
Talyutin @Talyutin

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

Написано более трёх лет назад
Isaac Clark @Dark_Knight Автор вопроса

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

Написано более трёх лет назад
Isaac Clark @Dark_Knight Автор вопроса

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

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 15 часов назад
- 59 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 16 часов назад
- 76 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 20 часов назад
- 104 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 21 час назад
- 76 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 22 часа назад
- 37 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 45 просмотров
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 33 просмотра
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Скрыть / убрать лишние поля в форме заказа

19 апр. 2024, в 07:30

1500 руб./в час

Взлом автомобильной программы

19 апр. 2024, в 05:01

999999 руб./за проект

Доработать телеграм бота

19 апр. 2024, в 03:52

1000 руб./за проект

уже написал для каждого элемента
$('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 · 2013-01-29 18:10:49

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

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

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

Answer 2 · 2013-01-28 14:41:55

imater @imater

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

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

Ответ написан более трёх лет назад

3 комментария

Answer 3 · 2013-01-28 15:54:07

Talyutin @Talyutin

api.jquery.com/finish/

Ответ написан более трёх лет назад

4 комментария

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт