animating background colors using jquery
Hello guys so what I am trying to do is to animate a buttons background color using jquery.
$(document).ready(function(){
$('button').mouseenter(function(){
$('button').animate({
background-color:"blue"},1000);
});
$('button').mouseleave(function() {
$('button').animate({
background-color:"white"},1000);
});
});
What did I do wrong? And one more thing, can you explain like for dummies? :D
P.S. : I am using bootstrap
Answers:
jQuery can't natively animate colours. You need to use a plugin, like this one: http://www.bitstorm.org/jquery/color-animation/.
Better than that you can use CSS transitions, assuming you don't need to support IE9 or lower.
button {
background-color: blue;
transition: background-color 1s;
-moz-transition: background-color 1s;
-webkit-transition: background-color 1s;
/* for prettyness only */
border: 0;
color: #CCC;
border-radius: 5px;
padding: 10px;
}
button:hover {
background-color: white;
}
button a {
color: white;
transition: color 1s;
-moz-transition: color 1s;
-webkit-transition: color 1s;
}
button:hover a {
color: blue;
}<button><a href="#">Foo bar</a>
</button>jQuery does not naively support this. Try using the jQuery.color plugin:
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>