Oyente de eventos de transición CSS3 con jQuery

I am implementing a CSS3 transition effect on a article element but the event listener transición works only in pure JavaScript, not with jQuery.

Vea el ejemplo a continuación:

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

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

Can somebody explain me what am I doing wrong?

preguntado el 01 de julio de 12 a las 18:07

4 Respuestas

Also take note that if you are running multiple transitions on an element (eg. opacity and width) that you'll get multiple transitionEnd callbacks.

If you're using jQuery to bind an event to a div's transition end, you might want to consider using one() function.

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

This means that the code will only fire the first time. So, if you had four different transitions happening on the same element, your callback will only fire once.

Respondido 15 Oct 13, 15:10

Usar one() makes sure that you only capture one event. - grisgilmore

You better check if e.currentTarget is the proper element, because transitionend will fire to the parent for any animations of its children too. - veneno

in jQuery you should use bind() or on() método:

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

Respondido 01 Jul 12, 18:07

For full compatibility, you should include the vendor-prefixed events, too. See http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end para detalles. - Brandon Belvin

this.parentNode returns a javascript object. It has a property .addEventListener $(this).parent()returns a jQuery object. It does not have a property .addEventListener

Prueba esto en su lugar

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

Respondido 01 Jul 12, 19:07

If the first one really works (I doubt it because it should require a vendor prefix), then this should work too:

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

Respondido 01 Jul 12, 18:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.