Include JqueryUI
In project.
$('#element').animate({backgroundColor:'#99cc00'}, 2500);
Вопрос
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?
Решение
Другие советы
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>