Запустить событие только в том случае, если предыдущий закончен?

В приведенной ниже функции, я хотел бы, чтобы последнее событие $('.bg-contact').addClass('activated'); начиналось, когда предыдущее событие было полностью завершено. На данный момент все происходит сразу. Как я могу убедиться, что .bg-contact получает класс activated, добавленный только после того, как все выше этого уже произошло?Запустить событие только в том случае, если предыдущий закончен?

function contactFadeIn() { 
    $('#contact').addClass('activated'); 
    $('#contact-info').removeClass('fadeOutUp').addClass('animated fadeInUp'); 
    $('.bg-contact').addClass('activated'); 
}

Редактировать

function contactFadeIn() { 
    $('#contact').addClass('activated'); 
    $('#contact-info').removeClass('fadeOutUp').addClass('animated fadeInUp').on('transitionend webkitTransitionEnd oTransitionEnd', function() { 
     $('.bg-contact').addClass('activated'); 
    });; 
}

источник

2015-01-12 J82

добавление или удаление класса является как можно ближе к мгновенным, как вы собираетесь получить - то есть, нет обратного вызова для их. JQuery анимации, как правило, цепочки, так что действие может быть выполнено в конце анимации. – Jamiec

@Jamiec: Переходы CSS, вероятно, здесь. –

У вас есть анимация с этими классами? Если да, обновите его с полной продолжительностью анимации. Если нет, я не понимаю, что вы подразумеваете под полным завершением. Он будет работать по строкам, выполняя каждый класс add/remove. – Charly

Вы, вероятно, CSS переходы в виду.

Если это так, то используйте событие transitionEnd, чтобы запланировать событие, которое произойдет, когда переход будет выполнен.

источник

2015-01-12 16:10:00

Могу ли я добавить это на конец второй строки, как это? '$ ('# contact-info'). removeClass ('fadeOutUp'). addClass ('animated fadeInUp'). on ('transitionend webkitTransitionEnd oTransitionEnd', function() {// мой обработчик событий});'? Редактировать: Похоже, я могу. :) – J82

@ J82: Обычно вы связываете обработчик событий один раз, чтобы он запускался каждый раз, когда происходит событие. –

У меня было что-то подобное сделать и следующий работал большой ....

//update quantity and animate 
$(".quan").addClass("scaled").delay(200).queue(function() { 
    $(this).removeClass("scaled"); 
    $(this).dequeue(); 
});`

источник

2015-01-12 16:11:49

Это означает, что вам нужно поддерживать длительность в двух местах (CSS и код). –

Я так думаю ... в моем css у меня есть переход 0,1 с, так что меняется фон и размер объекта hte. Все Javascript делает это, чтобы изменить класс, а затем добавляет задержку перед удалением. Однако я обнаружил, что просто использование перехода не сработало, так как Javascript слишком быстро менял класс. –

Запустить событие только в том случае, если предыдущий закончен?

ответ

Смежные вопросы