Link animated color changing in jQuery?

问题

I've a link named #link.

It changes color after hover, like this:

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

All I want to do is smooth, animated color change.

I know I have to put .css in an .animation somehow, but can't figure it out how.

I think that's the right way, but it doens't work at all:

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

I've also tried like this:

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

But I'm still wrong somehow. Any helping hand? I know I'm missing something really small.

回答1:

The call to .animate() looks like this:

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

You can give it a try here. But keep in mind that you need to include either the color plugin or jQuery UI, since jQuery core doesn't support color animations.

回答2:

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

use .stop() to prevent animation cycling issues

回答3:

you have a stray css({}) in there, the call should look like this:

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

回答4:

i have been having this problem for a long time. unforutanely all the above solutions fail

<!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>

no matter how i put in the parameter the color would ot change NOTE: the jquery ui library was imported too

回答5:

I found a single website which serves an excellent use of JQuery animation effects. Please find below few good examples that may solve all your queries. For this you may required latest version browsers.

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

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

Thanks.

来源：https://stackoverflow.com/questions/3681767/link-animated-color-changing-in-jquery

标签

jquery

css

jquery-animate