0

Is it possible to animate a background color change in a click function? I saw many examples with mouseover/hover functions but none with a click function. Only without animation following line works:

$('#element').css({ backgroundColor: "#99cc00" });

I tried to add an animation effect with:

$('#element').animate({ backgroundColor: '#ffffff' }, 2000);

and 

$('#element').css({ backgroundColor: "#99cc00" }).animate({}, 2500);

but without an effect. Please have a look at my fiddle: http://jsfiddle.net/dna6B/

Any ideas?

user2718671
  • 2,866
  • 9
  • 49
  • 86

3 Answers3

2

Include JqueryUI In project.

$('#element').animate({backgroundColor:'#99cc00'}, 2500);

Demo

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
1

You can do this using JQuery UI.

$('#element').click(function () {
    $(this).stop().animate({backgroundColor:'#99cc00'}, 2500);
});

Update version of your JSFiddle

ZiNNED
  • 2,620
  • 20
  • 31
1

to animate the background color you need to use jqueryUI

Lets say your current #element background is #000000

then doing this 

$('#element').click(function() {
    $('#element').animate({ backgroundColor: '#ffffff' }, 2000);
});

will change animate the background from black to white in 2 seconds.

http://api.jqueryui.com/color-animation/

So you would need to include this in your head html, along with the regular jquery

<head>

<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>
CRABOLO
  • 8,605
  • 39
  • 41
  • 68
  • Thx! It was written in the documentation: "Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated." but I didn't see it. *facepalm* – user2718671 Feb 11 '14 at 15:36