Comment puis-je animer en douceur les changements de classe avec jQuery, en évitant les files d'attente d'animation et les conflits de style ?

Animation de la manipulation de classe avec jQuery

Problème :

Dans jQuery, en utilisant addClass() et removeClass(), comment animez-vous en douceur les changements de classe comme vous le pouvez avec animate() ?

Exemple 1 : Utilisation d'animate()

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

Cette approche répond à tous les critères souhaités : des transitions fluides, pas de file d'attente d'animation et un assouplissement correct. Cependant, les changements de style doivent être définis au sein de l'animation, en les séparant des feuilles de style.

Exemple 2 : Utilisation de addClass() et removeClass()

$('#someDiv').addClass('blue').mouseover(function() {
  // Remove inline styles before applying 'red' class with animation
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  // Same for removing 'red' class
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

Cette approche répond partiellement aux critères, présentant des transitions fluides et évitant les files d'attente. Cependant, en raison de l'ajout temporaire de styles par jQuery lors des animations de classe, la couleur saute lors d'un mouvement prématuré de la souris.

Solution :

Pour obtenir le comportement souhaité tout en consolidant les styles dans les classes , pensez à utiliser des transitions CSS avec jQuery pour manipuler les changements de classe.

#someDiv {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

$('#someDiv').addClass('blue').mouseover(function() {
  $(this).addClass('red');
}).mouseout(function() {
  $(this).removeClass('red');
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!