jQuery的變化背景顏色

Question

我嘗試了jQuery的這個例子：

$(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. Color of <p> to turn yellow 
2. <p> to slowly fade 
3. <p> to slowly show 
4. Color of <p> to turn 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/

說明：

你^ h在切換背景顏色之前要等待動畫功能的回調。你也不應該只使用數字ID：s，如果你有一個你的<p>的ID，你不應該在你的選擇器中包含一個類。

我也增進了你的代碼（jQuery對象的緩存，鏈接等）

更新： 作爲建議的VKolev的顏色時，該項目是隱藏正在改變。