Jquery cambia color de fondo

Question

yo estaba tratando de salir de 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"); 
     }); 
    }); 

me espera el siguiente a suceder:

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

Pero esto es lo que realmente ocurrió:

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

¿Por qué es eso?

Answer 1

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 está buscando, que había necesidad de 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 para ejecutar animaciones a agotarse y entonces incendios lo que sea en la función que se suministra.

Answer 2

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

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

What are valid values for the id attribute in HTML?
de no se puede iniciar con los dígitos de Identificación !!!

Answer 3

Esto es como debe 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:

Usted h ave para esperar la devolución de llamada 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 <p>, no debe incluir una clase en su selector.

también aumenté su código (almacenamiento en caché del objeto jQuery, encadenamiento, etc.)

Actualización: Como sugiere VKolev el color ahora está cambiando cuando el elemento no está oculto.