Modifier la couleur de l'arrière-plan

Question

J'essayais jQuery avec cet exemple:

  $(document).ready(function(){
      $("button").mouseover(function(){
        $("p#44.test").css("background-color","yellow");
        $("p#44.test").hide(1500);
        $("p#44.test").show(1500);
        $("p#44.test").css("background-color","red");
      });
    });
 

Je m'attendais aux événements suivants:

 1. Color of <p> to turn yellow
2. <p> to slowly fade
3. <p> to slowly show
4. Color of <p> to turn red
 

Mais voici ce qui s'est réellement passé:

 1. <p> turned red
2. <p> slowly hid away
3. <p> slowly showed
 

Pourquoi donc?

Answer 1

La fonction .css() ne fait pas la queue derrière les animations en cours, elle est instantanée.

Pour correspondre au comportement que vous recherchez, vous devez procéder comme suit:

 $(document).ready(function() {
  $("button").mouseover(function() {
    var p = $("p#44.test").css("background-color", "yellow");
    p.hide(1500).show(1500);
    p.queue(function() {
      p.css("background-color", "red");
    });
  });
});
 

La fonction .queue() attend l'exécution des animations, puis déclenche tout ce qui se trouve dans la fonction fournie.

Answer 2

C'est comment il devrait être:

Code:

$(function(){
  $("button").mouseover(function(){
    var $p = $("#P44");
    $p.stop()
      .css("background-color","yellow")
      .hide(1500, function() {
          $p.css("background-color","red")
            .show(1500);
      });
  });
});

Démo: http://jsfiddle.net/p7w9W/2/

Explication:

Vous avez à attendre pour le rappel sur l'animation de fonctions avant de changer de couleur d'arrière-plan. Vous devriez également de ne pas utiliser seulement IDENTIFIANT numérique:s, et si vous avez un ID de votre <p> il vous ne devriez pas inclure une classe dans votre sélection.

J'ai également amélioré votre code (mise en cache de l'objet jQuery, chaînage, etc.)

Mise à jour: Comme suggéré par VKolev la couleur est en train de changer lorsque l'élément est masqué.

Answer 3

essayez de mettre un délai sur le dernier fondu de couleur.

 $("p#44.test").delay(3000).css("background-color","red");
 

Qu'est-ce qu'une valeur valide pour les attributs id en HTML?
Les identifiants ne peuvent pas commencer par des chiffres !!!