Jquery cambia colore di sfondo

Stavo provando jquery con questo esempio:

 $(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");
      });
    });

Mi aspettavo che accadesse quanto segue:

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

Ma questo è ciò che è realmente accaduto:

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

Perché?

La .css()funzione non si mette in coda dietro animazioni in esecuzione, è istantanea.

Per abbinare il comportamento che stai cercando, dovresti fare quanto segue:

$(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()funzione attende che si esauriscano le animazioni in esecuzione, quindi attiva tutto ciò che è presente nella funzione fornita.

Ecco come dovrebbe essere:

Codice:

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

Demo: http://jsfiddle.net/p7w9W/2/

Spiegazione:

Devi aspettare il callback sulle funzioni di animazione prima di cambiare il colore di sfondo. Inoltre, non dovresti usare solo ID numerici: se hai un ID <p>lì, non dovresti includere una classe nel tuo selettore.

Ho anche migliorato il tuo codice (memorizzazione nella cache dell'oggetto jQuery, concatenamento, ecc.)

Aggiornamento: come suggerito da VKolev, il colore ora cambia quando l'oggetto è nascosto.

prova a ritardare la dissolvenza dell'ultimo colore.

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

Quali sono i valori validi per l'attributo id in HTML?
Gli ID non possono iniziare con le cifre !!!