哈弗動畫與jQuery

Question

我寫了一個非常基本的jQuery腳本theorically但不能是真實的瀏覽器：

<ul class="menUl"> 
    <li> <a href="#">TEMPLATE<span>DESIGN</span></a> </li> 
    <li> <a href="#">FRONTEND<span>CODING</span></a> </li> 
    <li> <a href="#">SERVESIDE<span>CODING</span></a> </li> 
    <li> <a href="#">CONTACT<span>ME</span></a> </li> 
</ul> 

的jQuery：

$(document).ready(function(){ 
    $(".menUl li a").hover(function() { 
    $(this).animate({color: "#c7ce95" }, 600); 
    },function() { 
    $(this).animate({ color: "#807e7c" }, 400); 
    }); 
}); 

什麼是錯我的代碼？ http://jsfiddle.net/GGnb7/ 預先感謝

Answer 1

需要要麼jQuery color plugin或jQuery UI（其包括相同的功能）以動畫的顏色。作爲示例：here's your fiddle with jQuery UI included (only change) to see it working。

Answer 2

jQuery中的animate（）函數只會動畫數值CSS屬性。顏色屬性的值不是數字。爲了給顏色屬性設置動畫，你需要包含jQuery ui，或者Nick提到的另一個更輕量級的插件，它將擴展jQuery對象以實現該功能。

解釋了這一切。

Answer 3

我想補充說，stop（）應該幾乎總是用在這種類型的動畫中，當鼠標光標快速傳遞到元素上時，會停止不穩定的「內存」行爲。

這裏的更新，例如：

$(document).ready(function(){ 
    $(".menUl li a").hover(function() { 
     $(this).stop().animate({color: "#c7ce95" }, 600); 
    },function() { 
     $(this).stop().animate({ color: "#807e7c" }, 400); 
    }); 
});