Can I fade in color using jQuery?

Question

I have javascript that modifies some HTML with a function like this:

if (correct == "true") { $('#ft2').html('Correct'); $('#ft2').css('color', 'Green') $('#ft2').css('border-color', 'Green') } else { $('#ft2').html('Incorrect'); $('#ft2').css('color', 'Red') $('#ft2').css('border-color', 'Red') } 

The text changes very quickly on the page, and I would like it to look better for my users. Is there a way I can use jQuery to fade in color? For example, a new color appears within one second.

Answer 1

If you want to animate color in jquery, you will need a plugin:

http://plugins.jquery.com/project/color

Edit: It looks like the link to the Resig plugin is out of date, so you can also try some of the other plugins that were written to do the same:

http://www.bitstorm.org/jquery/color-animation/

here's a direct link to the original Resig plugin:

http://plugins.jquery.com/files/jquery.color.js.txt

Just save the page as jquery.color.js

Answer 2

If you add the jQuery user interface, they add support for color animations.

Read more at http://jqueryui.com/demos/animate/ .

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function(){ $(".block").toggle(function() { $(this).animate({ color: "#FF0000" }, 1000); },function() { $(this).animate({ color: "#00FF00" }, 1000); }); }); </script> 

Answer 3

use animate :

 $('#div').animate({'background-color': '#ff00ff'});