web-dev-qa-db-fra.com

ToggleClass animer jQuery?

J'ai une section sur mon site Web qui, lorsqu'un utilisateur clique dessus, souhaite le développer, j'utilise le toggleClass de jQuery pour cela ...

expandable: function(e) {
    e.preventDefault();
    $(this).closest('article').toggleClass('expanded', 1000);
}

Cela fonctionne bien, seulement j'aimerais l'animer. Dans chrome, mon article passe lentement à la nouvelle taille. Seulement dans Firefox, il se redimensionne "instantanément" sans animation. Y a-t-il un moyen d'avoir cette animation?

javascriptjqueryhtml5
37
Liam

jQuery UI étend le jQuery natif toggleClass pour prendre un deuxième paramètre facultatif: duration

toggleClass( class, [duration] )

Docs + DEMO

59
gdoron

.toggleClass() ne s'animera pas, vous devriez opter pour la méthode slideToggle() ou .animate().

22
thecodeparadox

Vous pouvez simplement utiliser des transitions CSS, voir ce violon

.on {
color:#fff;
transition:all 1s;
}

.off{
color:#000;
transition:all 1s;
}
14
Dario Corno

J'ai tenté d'utiliser la méthode toggleClass pour masquer un élément sur mon site (avec une visibilité: caché par opposition à un affichage: aucun) avec une légère animation, mais pour une raison quelconque, l'animation ne fonctionnerait pas (probablement à cause d'une ancienne version de jQuery UI ).

La classe a été supprimée et ajoutée correctement, mais la durée que j'ai ajoutée ne semble faire aucune différence: l'élément a simplement été ajouté ou supprimé sans effet.

Donc, pour résoudre ce problème, j’ai utilisé une seconde classe dans ma méthode de basculement et appliqué une transition CSS:

Le CSS:

.hidden{
    visibility:hidden;
    opacity: 0;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}
.shown{
    visibility:visible;
    opacity: 1;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}

Le JS:

    function showOrHide() {
        $('#element').toggleClass("hidden shown");
    }

Merci @ tomas.satinsky pour la réponse géniale (et super simple) sur cet article

7
DevManQP

Vous devriez regarder la fonction toggle trouvée sur jQuery . Cela vous permettra de spécifier une méthode d'accélération pour définir le fonctionnement de la bascule.

slideToggle ne glisse que de haut en bas, pas de gauche à droite si c'est ce que vous recherchez.

Si vous avez besoin que la classe soit également basculée, vous pouvez définir cela dans la fonction toggle avec un:

$(this).closest('article').toggle('slow', function() {
    $(this).toggleClass('expanded');
});
5
Brombomb

J'aurais dû vérifier, une fois que j'ai inclus la bibliothèque de l'interface utilisateur jQuery, cela fonctionnait bien et….

1
Liam