Jquery change la couleur de fond

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 à ce que ce qui suit se produise:

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 c'est ce qui s'est réellement passé:

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

Pourquoi donc?

La .css()fonction ne fait pas la queue derrière les animations en cours d'exécution, 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 .queue()fonction attend que les animations en cours s'épuisent, puis déclenche tout ce qui se trouve dans la fonction fournie.

Ça devrait être comme cela:

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 devez attendre le rappel des fonctions d'animation avant de changer la couleur d'arrière-plan. Vous ne devez pas non plus utiliser uniquement des ID numériques: s, et si vous en avez un <p>, vous ne devez pas inclure de classe dans votre sélecteur.

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 change maintenant lorsque l'élément est masqué.

essayez de retarder le dernier fondu de couleur.

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

Quelles sont les valeurs valides pour l'attribut id en HTML?
Les identifiants ne peuvent pas commencer par des chiffres !!!