CODEWITHSUNDEEP
jquery
TheNone
TheNone

Reputation: 5802

Hover animation with jquery

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

Upvotes: 3

Views: 651

Answers (3)

hjhndr
hjhndr

Reputation: 68

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);
    });
});

Upvotes: 1

Pizano
Pizano

Reputation: 418

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.

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630627

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.

Upvotes: 5

Related Questions