Jquery changer la couleur de fond

Question

j'ESSAYER 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 me attendais à ce qui suit pour se produire:

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 est arrivé:

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

Pourquoi est-ce?

Answer 1

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

Pour correspondre le comportement que vous êtes après, vous aurez besoin de faire ce qui 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 des animations en cours d'exécution à court et feux tout ce qui est dans la fonction fournie.

Answer 2

Essayez de retarder le dernier fondu de couleur.

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

What are valid values for the id attribute in HTML?
ID de ne peut pas commencer avec des chiffres !!!

Answer 3

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

J'ai aussi amélioré votre code (mise en cache de l'objet jQuery, enchaînant, etc.)

Mise à jour: Comme le suggère VKolev la couleur est en train de changer lorsque l'élément est caché.