Hover animation with jquery

Question

Hi there; I have written a very basic jquery script that is true theorically but not in browser:

<ul class="menUl">
  <li> <a href="#">TEMPLATE<span>DESIGN</span></a> </li>
  <li> <a href="#">FRONTEND<span>CODING</span></a> </li>
  <li> <a href="#">SERVESIDE<span>CODING</span></a> </li>
  <li> <a href="#">CONTACT<span>ME</span></a> </li>
</ul>

jQuery:

$(document).ready(function(){
  $(".menUl li a").hover(function() {
    $(this).animate({color: "#c7ce95" }, 600);
  },function() {
    $(this).animate({ color: "#807e7c" }, 400);
  });
});

What is wrong with my code? http://jsfiddle.net/GGnb7/ Thanks in advance

Answer 1

You need either the jQuery color plugin or jQuery UI (which includes the same functionality) to animate colors.

As an example: here's your fiddle with jQuery UI included (only change) to see it working.

Answer 2

The animate() function in jQuery will only animate numerical css properties. The value of the color property is not numeric. In order to animate the color property you'll need to include jQuery ui, or another lighter weight plugin as Nick mentioned, which will extend the jQuery object to have that functionality.

http://api.jquery.com/animate/ explains it all.

Answer 3

I would like to add that stop() should almost always be used in this type of animation to stop erratic 'memory' behavior when the mouse cursor is passed over elements repeatedly/&quickly.

Here's updated example:

$(document).ready(function(){
    $(".menUl li a").hover(function() {
        $(this).stop().animate({color: "#c7ce95" }, 600);
    },function() {
        $(this).stop().animate({ color: "#807e7c" }, 400);
    });
});