jQuery.animate () avec la classe css uniquement, sans styles explicites

Question

En utilisant JQuery animate, je voudrais utiliser des classes css, définies quelque part dans le fichier .css, sans avoir à donner explicitement tous les paramètres de styles à jquery.animate ().

Je peux créer un faux élément (par exemple, invisible) avec une telle classe, lire ses propriétés css et les donner à jquery.animate (). Quelqu'un connaît-il un meilleur moyen?

Answer 1

JQueryUI fournit une extension à la fonction animate qui vous permet d’animer une classe css.

edit : Exemple ici

Il existe également des méthodes pour ajouter / supprimer / basculer une classe qui pourraient également vous intéresser.

Answer 2

Weston Ruther a construit une chose similaire en utilisant la proposition WebKit pour les transitions CSS :

http://weston.ruter.net/projects/jquery-css-transitions/

Cette implémentation pourrait vous être utile.

Answer 3

Découvrez animateToSelector de James Padolsey

Intro: Ce plugin jQuery vous permettra d'animer n'importe quel élément avec les styles spécifiés dans votre feuille de style. Tout ce que vous avez à faire est de passer un sélecteur et le plug-in le recherchera dans votre feuille de style puis l'appliquera en tant qu'animation.

Answer 4

Dans de nombreux cas, vous êtes beaucoup mieux d’utiliser CSS transitions pour cela, et dans les vieux navigateurs l’assouplissement simplement sera instantanée. La plupart des animations (comme fade in/out) sont très triviales pour mettre en œuvre et le navigateur effectue toutes les démarches pour vous. http://net.Tutsplus.com/tutorials/HTML-CSS-techniques/CSS-fundametals-CSS-3-transitions/