l'animation addClass/removeClass avec jQuery

Je suis à l'aide de jQuery et jQuery ui et que vous souhaitez animer différents attributs de divers objets.

Par souci d'expliquer le problème ici, j'ai simplifié à l'un div qui passe du bleu au rouge lorsque l'utilisateur passe la souris dessus.

Je suis en mesure d'obtenir le comportement que je veux lors de l'utilisation de animate(), cependant en faisant de la sorte les styles, je suis l'animation doivent être dans le code d'animation et sont donc séparées de ma feuille de style. (voir exemple 1)

Une alternative est d'utiliser addClass() et removeClass() mais je n'ai pas été en mesure de recréer le comportement exact que je peux avoir avec animate(). (voir exemple 2)

---

Exemple 1

Prenons un coup d'oeil 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, je suis à la recherche d':

1. Anime en douceur entre le rouge et le bleu.
2. Pas de l'animation "overqueue-ing' lorsque l'utilisateur déplace la souris rapidement et de sortir de la div.
3. Si l'utilisateur déplace sa souris out/in, tandis que l'animation est toujours en cours de lecture, il facilite correctement entre le courant "à mi-chemin de l'état et de la nouvelle" but " de l'état.

Mais depuis les changements de style sont définis dans animate() j'ai du modifier le style des valeurs, et ne pouvez pas simplement pointer vers ma feuille de style. Cette "fragmentation" de où les styles sont définis est quelque chose qui vraiment me dérange.

---

Exemple 2

Ici est ma meilleure tentative à l'aide de addClass() et removeClass (à noter que pour l'animation de travailler 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});
  });

Ce qui témoigne à la fois de la propriété 1. et 2. de mon origine, mais 3 ne fonctionne pas.

Je comprends la raison de ceci:

Lors de l'animation addClass() et removeClass() jQuery ajoute une temporaire de style à l'élément, puis incrémente les valeurs appropriées jusqu'à ce qu'ils atteignent les valeurs de la condition de la classe, et alors seulement, il n'en fait ajouter/supprimer la classe.

À cause de cela, je dois supprimer l'attribut style, sinon, si l'animation est arrêtée à mi-chemin de l'attribut style serait de rester et de manière permanente remplacer toutes les valeurs de classe, puisque les attributs de style dans une balise ont plus d'importance que la classe les styles.

Toutefois, lorsque l'animation est à mi-chemin fait qu'il n'a pas encore ajouté de la nouvelle classe, et donc, avec cette solution, la couleur passe à la couleur précédente lorsque l'utilisateur déplace sa souris avant de l'animation est terminée.

---

Ce que je veux, idéalement, est d'être capable de faire quelque chose comme ceci:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

Où getClassContent serait-il suffit de retourner le contenu de la condition de la classe. Le point clé est que de cette façon je n'ai pas à garder mon style de définitions de tous sur la place, mais peut tenir dans les classes, dans ma feuille de style.