Событие перехода в CSS3 с помощью jQuery

Я реализую эффект перехода CSS3 к элементу статьи, но переход к событию для прослушивателя событий работает только в чистом JavaScript, а не в jQuery.

См. пример ниже:

// this works
this.parentNode.addEventListener( 'transitionend', function() {alert("1"); }, true);

// this does not work
$(this).parent().addEventListener( 'transitionend', function() {alert("1"); }, true);

Может кто-нибудь объяснить мне, что я делаю неправильно?

Ответы

Ответ 1

в jQuery вы должны использовать метод bind() или on():

$(this).parent().bind( 'transitionend', function() {alert("1"); });

Ответ 2

Также обратите внимание, что если вы выполняете несколько переходов на элементе (например, непрозрачность и ширина), вы получите множественные обратные вызовы transitionEnd.

Если вы используете jQuery для привязки события к концу перехода div, вам может потребоваться использовать функцию one().

$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    // your code when the transition has finished
});

Это означает, что код будет запускаться только в первый раз. Итак, если у вас было четыре разных перехода, происходящих на одном и том же элементе, ваш обратный вызов будет срабатывать только один раз.

Ответ 3

this.parentNode возвращает объект javascript. Он обладает свойством .addEventListener $(this).parent() возвращает объект jQuery. Он не имеет свойства .addEventListener

Попробуйте вместо этого

$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() {
    alert("1");
})

Ответ 4

Если первый действительно работает (я сомневаюсь, потому что он должен требовать префикс поставщика), тогда это тоже должно работать:

$(this).parent().on('transitionend', function() {
    alert("1");
});