Я реализую эффект перехода 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);
Может кто-нибудь объяснить мне, что я делаю неправильно?
в jQuery вы должны использовать метод bind() или on():
$(this).parent().bind( 'transitionend', function() {alert("1"); });
Также обратите внимание, что если вы выполняете несколько переходов на элементе (например, непрозрачность и ширина), вы получите множественные обратные вызовы transitionEnd.
Если вы используете jQuery для привязки события к концу перехода div, вам может потребоваться использовать функцию one().
$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
// your code when the transition has finished
});
Это означает, что код будет запускаться только в первый раз. Итак, если у вас было четыре разных перехода, происходящих на одном и том же элементе, ваш обратный вызов будет срабатывать только один раз.
this.parentNode возвращает объект javascript. Он обладает свойством .addEventListener
$(this).parent() возвращает объект jQuery. Он не имеет свойства .addEventListener
Попробуйте вместо этого
$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() {
alert("1");
})
Если первый действительно работает (я сомневаюсь, потому что он должен требовать префикс поставщика), тогда это тоже должно работать:
$(this).parent().on('transitionend', function() {
alert("1");
});