Jquery cambia el color de fondo

Estaba probando jquery con este ejemplo:

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

Esperaba que ocurriera lo siguiente:

 1. Color of 

to turn yellow 2.

to slowly fade 3.

to slowly show 4. Color of

to turn red

Pero esto es lo que realmente sucedió:

 1. 

turned red 2.

slowly hid away 3.

slowly showed

¿Porqué es eso?

La función .css() no hace cola detrás de la ejecución de animaciones, es instantánea.

Para que coincida con el comportamiento que busca, debe hacer lo siguiente:

 $(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 función .queue() espera que las animaciones en ejecución se agoten y luego activa lo que esté en la función suministrada.

Así es como debería ser:

Código:

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

Demostración: http://jsfiddle.net/p7w9W/2/

Explicación:

Debe esperar la callback en las funciones de animación antes de cambiar el color de fondo. Tampoco debe usar solo ID numéricos, y si tiene una ID de su

allí, no debe incluir una clase en su selector.

También mejoré tu código (almacenamiento en caché del objeto jQuery, encadenamiento, etc.)

Actualización: según lo sugerido por VKolev, el color ahora está cambiando cuando el elemento está oculto.

intente poner un retraso en el último fundido de color.

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

¿Cuáles son los valores válidos para el atributo id en HTML?
ID no puede comenzar con dígitos !!!