jQueryの変更の背景色

Question

：

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

しかし、これは実際に何が起こったのかです：：

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

私は、次のことが起こることが予想

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

なぜですか？

Answer 1

.css()機能は、実行中のアニメーションの後ろにキューイングされません。瞬時に実行されます。あなたが次のことを行う必要があると思いますが、後にしている行動を一致させるために

：

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

.queue()関数が出て実行するようにアニメーションを実行するのを待ち、その後、供給機能に何でも発射します。

Answer 2

最後の色のフェードに遅れを入れてみてください。

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

What are valid values for the id attribute in HTML?
IDの数字で始めることはできません！

Answer 3

これはどのようにすべきである：

コード：

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

デモ： http://jsfiddle.net/p7w9W/2/

説明：

あなた時間背景色を切り替える前に、アニメーション機能のコールバックを待つようにしてください。また、数字のIDだけを使用しないでください。IDが<p>の場合は、セレクタにクラスを含めないでください。

私はまた、あなたのコード（jQueryオブジェクトのキャッシング、連鎖する、など）強化

更新： VKolevアイテムが隠されているとき、今変更された色によって示唆されるように。