jquery animate .css

Question

I have a script:

$('#hfont1').hover(     function() {         $(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover     },      function() {         $(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout     } ); 

how can i animate it or slow it down, so it wont be instant ?

Answer 1

Just use .animate() instead of .css() (with a duration if you want), like this:

$('#hfont1').hover(function() {     $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000); }, function() {     $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000); }); 

You can test it here. Note though, you need either the jQuery color plugin, or jQuery UI included to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.

Answer 2

You could opt for a pure CSS solution:

#hfont1 {     transition: color 1s ease-in-out;     -moz-transition: color 1s ease-in-out; /* FF 4 */     -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */     -o-transition: color 1s ease-in-out; /* Opera */ }