我有一个名为 #link 的链接。
悬停后会改变颜色，如下所示：
$("#link").hover(function(){
$(this).css({color: '#fed900'});
});
我想做的只是平滑的动画颜色变化。
我知道我必须以某种方式将 .css 放入 .animation 中，但不知道怎么做。
我认为这是正确的方法，但它根本不起作用：
$("#link").hover(function(){
$(this).animate( { css({color: '#fed900'}) }, "slow" );
});
我也试过这样：
$(this).animate({ .css({color: '#fed900'}), "slow" });
但不知何故我还是错了。有帮手吗？我知道我错过了一些非常小的东西。
【问题讨论】：
标签： jquery css jquery-animate
我找到了一个很好地使用 JQuery 动画效果的网站。请在下面找到一些可以解决您所有疑问的好例子。为此，您可能需要最新版本的浏览器。
http://e-weddingcardswala.in/e_cardscollection/841/
http://e-weddingcardswala.in/e_cardscollection/840/
谢谢。
【讨论】：
这个问题困扰我很久了。不幸的是，上述所有解决方案都失败了
<!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 ui 库 也已导入
【讨论】：
$("#link").hover(function(){
$(this).stop().animate({ color: '#fed900'}, "slow");
}, function() {
$(this).stop().animate({ color: '#000000'}, "slow"); //original color
});
使用 .stop() 来防止动画循环问题
【讨论】：
你有一个流浪的css({})，电话应该是这样的：
$("#link").hover(function(){
$(this).animate( {color: "#fed900"}, "slow" );
});
【讨论】：
对.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 核心不支持彩色动画。
【讨论】：