Почему анимация срабатывает 1 раз?

Question

[Алексей]

Всем привет! Почему анимация срабатывает только после первого клика на кнопку. 2-ой и последующие уже не сработает?
https://jsfiddle.net/jcxpmuf7/1/

Answer 1

[automatik]

https://jsfiddle.net/jcxpmuf7/7/

function hlight(element) {
    $(element).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(e) {
        $(element).removeClass('hlight');
    });

    $(element).toggleClass('hlight');
}

Comments

[Алексей]

Спасибо за отклик, но выбрал таки вариант с таймаутом... Меня пугает куча текста в one() ;)

[automatik]

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

Answer 2

[Константин Давыдов]

https://jsfiddle.net/n7qfp93h/

Answer 3

[Алексей Скляров]

https://jsfiddle.net/jcxpmuf7/2/ используйте вариант с toggleClass

Comments

[Алексей]

Тоже не подходит... Тогда она срабатывает по нечетным кликам

Answer 4

[Егор Живагин]

Асинхронность. Она не успевает сработать.
Я полусплю, в голову только костыли с таймаутом лезут