Animated Animation with jquery

Question

I wrote a very simple jquery script that is theoretically true, but not in the 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 a jQuery color plugin or jQuery UI (which includes the same functionality) to animate colors.

As an example: here is your jQuery UI fiddle enabled (change only) to see how it works .

Answer 2

animate() jQuery css. color . , jQuery ui , , jQuery, .

http://api.jquery.com/animate/ .

Answer 3

I would like to add that stop () should almost always be used in this type of animation to stop the messy behavior of the “memory” when the mouse cursor repeatedly passes the / & elements quickly.

Here's an updated example:

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