Question

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.