CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Saleh
Saleh

Reputation: 2719

Animation code doesn't work

I have this demo:

jsfiddle.net

$(document).ready(function(e) {        
    $(".footer-list li").mouseover(function() {
         $(this).animate({ backgroundColor: "#d31d4a" }, 1500);
        // $(this).css("background-color", "#d31d4a");
    });
});

Animation code doesn't work and I have no idea why!!

When I use .css, it works without any problems.

Can anyone tell me what the problem is?

Upvotes: 0

Views: 242

Answers (3)

nnnnnn
nnnnnn

Reputation: 150010

As the others said, jQuery's .animate() doesn't do colour animations by default. Another option to make it work is to include jQuery UI, which (amongst other things) "upgrades" the default .animate() method (as demonstrated here: http://jsfiddle.net/nnnnnn/WFVby/3/).

Upvotes: 1

Xhynk
Xhynk

Reputation: 13840

You need to have a "jquery.Color" plugin installed:

https://github.com/jquery/jquery-color

Upvotes: 0

Blender
Blender

Reputation: 298076

jQuery doesn't animate colors out-of-the-box, so you need a color animation plugin, like this one. Just include it and everything should work.

Demo: http://jsfiddle.net/WFVby/2/

Upvotes: 1

Related Questions