CSS3 transition Écouteur d'événements avec jQuery

Je me suis mise en œuvre d'un CSS3 effet de transition sur un article élément, mais l'écouteur d'événement transitionend fonctionne uniquement en JavaScript, pas avec jQuery.

Voir l'exemple ci-dessous:

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

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

Quelqu'un peut-il m'expliquer ce que je fais mal?

OriginalL'auteur Tudor Ravoiu | 2012-07-01

  1. 20

    en jQuery, vous devez utiliser bind() ou on() méthode:

    $(this).parent().bind( 'transitionend', function() {alert("1"); });
    Pour une compatibilité totale, vous devez inclure le vendeur précédé d'événements, trop. Voir http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end pour plus de détails.

    OriginalL'auteur undefined

  2. 23

    Également prendre note que si vous exécutez plusieurs transitions sur un élément (par exemple. l'opacité et la largeur) que vous allez obtenir plusieurs transitionEnd rappels.

    Si vous êtes à l'aide de jQuery pour lier un événement à un div à l'extrémité de transition, vous pouvez envisager d'utiliser une fonction de ().

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

    Cela signifie que le code se déclenche uniquement la première fois. Donc, si vous avez eu quatre différentes transitions qui se passe sur le même élément, votre rappel de déclencher une seule fois.

    Est-il one ou on?
    À l'aide de one() permet de s'assurer que vous ne capturer un événement.
    Vous mieux de vérifier si l'e.currentTarget est le bon élément, car transitionend le feu la mère de toutes les animations de ses enfants aussi.

    OriginalL'auteur graygilmore

  3. 4

    this.parentNode retourne un objet javascript. Il a une propriété .addEventListener
    $(this).parent()retourne un objet jQuery. Il n'a pas une propriété .addEventListener

    Essayez plutôt ceci,

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

    OriginalL'auteur Jashwant

  4. 1

    Si le premier fonctionne vraiment (j'en doute, car il doit exiger d'un fournisseur de préfixe), alors cela devrait fonctionner:

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

    OriginalL'auteur Esailija