在jQuery中鏈接動畫顏色變化？

它懸停後改變顏色，就像這樣：

$("#link").hover(function(){ 
    $(this).css({color: '#fed900'}); 
});

所有我想要做的就是流暢，動畫的顏色變化。

我知道我必須將.css放在.animation中，但不知道如何。

我認爲這是正確的方式，但它好好嘗試在所有的工作：

$("#link").hover(function(){ 
    $(this).animate({ css({color: '#fed900'}) }, "slow"); 
});

我也試過這樣：

$(this).animate({ .css({color: '#fed900'}), "slow" });

但我還是錯了不知何故。任何幫助的手？我知道我錯過了一些非常小的東西。

來源

2010-09-10 fomicz

[jQuery animate backgroundColor]的可能重複（http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor） – mercator 2010-12-03 10:06:09

到.animate()調用看起來是這樣的：

$("#link").hover(function(){ 
    $(this).animate({ color: '#fed900'}, "slow"); 
}, function() { 
    $(this).animate({ color: '#000000'}, "slow"); //original color 
});

You can give it a try here。但請記住，您需要包含the color plugin或jQuery UI，因爲jQuery核心不支持彩色動畫。

來源

2010-09-10 01:38:44

太棒了！我不知道爲什麼要推送.css的東西，但是你的方式在Opera中不起作用（至少對我而言）？：> – fomicz 2010-09-10 01:40:39

@fomicz - 你是否包含顏色插件或jQuery UI？ – 2010-09-10 01:42:01

我只有jQuery lib。如何包含顏色插件？ – fomicz 2010-09-10 01:44:04

你有一個流浪css({})在那裏，呼叫應該是這樣的：

$("#link").hover(function(){ 
    $(this).animate({color: "#fed900"}, "slow"); 
});

來源

2010-09-10 01:40:17

不適用於我。 – fomicz 2010-09-10 01:46:09

$("#link").hover(function(){ 
    $(this).stop().animate({ color: '#fed900'}, "slow"); 
}, function() { 
    $(this).stop().animate({ color: '#000000'}, "slow"); //original color 
});

使用.stop（）來防止動畫循環發出

來源

2012-01-09 13:43:27 DeN

我一直有這個問題很長時間。 unforutanely所有上述解決方案未能

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("div").animate({ 
     left:'250px', 
     opacity:'0.5', 
     height:'150px', 
     width:'150px', 
color:"#ffffff" 
    }); 
    }); 
}); 
</script> 
</head> 

<body> 
<button>Start Animation</button> 
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 
</div> 

</body> 
</html>

無論顏色如何，我把在參數加時賽變化注：jQuery用戶界面庫是進口過

來源

2013-04-22 15:25:26