How to change element's background-color with animation in click function? [duplicate]

StackOverflow https://stackoverflow.com/questions/21705691

Question

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?

Was it helpful?

Solution

Include JqueryUI In project.

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

Demo

OTHER TIPS

You can do this using JQuery UI.

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

Update version of your JSFiddle

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top