在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