J'utilise jQuery et jQuery-ui et je souhaite animer divers attributs sur divers objets.
Pour expliquer le problème ici, je l'ai simplifié en une div qui passe du bleu au rouge lorsque l'utilisateur passe la souris dessus.
Je peux obtenir le comportement que je souhaite lors de l'utilisation animate()
, mais lorsque je le fais, les styles que j'anime doivent être dans le code d'animation et sont donc séparés de ma feuille de style. (voir exemple 1 )
Une alternative utilise addClass()
et removeClass()
mais je n'ai pas pu recréer le comportement exact que je peux obtenir animate()
. (voir exemple 2 )
Exemple 1
Jetons un œil au code que j'ai avec animate()
:
$('#someDiv')
.mouseover(function(){
$(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
})
.mouseout(function(){
$(this).stop().animate( {backgroundColor:'red'}, {duration:500});
});
il affiche tous les comportements que je recherche:
- S'anime en douceur entre le rouge et le bleu.
- Aucune animation de «file d'attente excessive» lorsque l'utilisateur déplace rapidement sa souris dans et hors de la div.
- Si l'utilisateur déplace sa souris vers l'extérieur / vers l'intérieur pendant que l'animation est en cours de lecture, il se déplace correctement entre l'état «à mi-chemin» actuel et le nouvel état «objectif».
Mais comme les changements de style sont définis dans, animate()
je dois changer les valeurs de style là-bas, et je ne peux pas simplement le faire pointer vers ma feuille de style. Cette «fragmentation» de la définition des styles est quelque chose qui me dérange vraiment.
Exemple 2
Voici ma meilleure tentative actuelle en utilisant addClass()
et removeClass
(notez que pour que l'animation fonctionne, vous avez besoin de jQuery-ui):
//assume classes 'red' and 'blue' are defined
$('#someDiv')
.addClass('blue')
.mouseover(function(){
$(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
})
.mouseout(function(){
$(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
});
Cela présente à la fois la propriété 1. et 2. de mes exigences d'origine, mais 3 ne fonctionne pas.
J'en comprends la raison:
Lors de l'animation addClass()
et removeClass()
jQuery ajoute un style temporaire à l'élément, puis incrémente les valeurs appropriées jusqu'à ce qu'elles atteignent les valeurs de la classe fournie, et alors seulement, il ajoute / supprime réellement la classe.
Pour cette raison, je dois supprimer l'attribut style, sinon, si l'animation est arrêtée à mi-chemin, l'attribut style resterait et remplacerait définitivement toutes les valeurs de classe, car les attributs de style dans une balise ont une importance plus élevée que les styles de classe.
Cependant, lorsque l'animation est à mi-chemin, elle n'a pas encore ajouté la nouvelle classe, et avec cette solution, la couleur passe à la couleur précédente lorsque l'utilisateur déplace sa souris avant la fin de l'animation.
Ce que je veux idéalement, c'est pouvoir faire quelque chose comme ça:
$('#someDiv')
.mouseover(function(){
$(this).stop().animate( getClassContent('blue'), {duration:500});
})
.mouseout(function(){
$(this).stop().animate( getClassContent('red'), {duration:500});
});
Où getClassContent
retournerait simplement le contenu de la classe fournie. Le point clé est que de cette façon, je n'ai pas à conserver mes définitions de style partout, mais je peux les conserver dans les classes de ma feuille de style.
getClassContent
ressemble