Question

我有一个名为#link的链接。

悬停后它会改变颜色，如下所示：

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

我想做的就是平滑，动画的颜色变化。

我知道我必须以某种方式将.css放在.anss中，但无法弄清楚如何。

我认为这是正确的方式，但它根本不起作用：

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

我也尝试过这样：

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

但我仍然错了。有帮手吗？我知道我错过了一些非常小的东西。

Answer 1

对.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核心不支持彩色动画。

Answer 2

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

使用.stop（）来防止动画循环问题

Answer 3

你有一个迷路css({})，电话应该是这样的：

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

Answer 4

我一直有这个问题很长一段时间。不可思议的是，上述所有解决方案都失败了

<!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库 也是导入的

Answer 5

我找到了一个可以很好地利用JQuery动画效果的网站。请在下面找到几个可以解决所有问题的好例子。为此，您可能需要最新版本的浏览器。

http://e-weddingcardswala.in/e_cardscollection/841/

http://e-weddingcardswala.in/e_cardscollection/840/

感谢。

在jQuery中链接动画颜色变化？

5 个答案: