Jquery Background Color Animation
Hi everyone! In this tutorial we'll change css background color property value with animation in jquery.
If you read my previous post http://tyln.tumblr.com/post/25276892810/building-html-css-menu-aligning-child-div i told about some kind of animations in jquery. This is a simple jquery animation.
Assume that we have a div named conteiner. (It's class name is conteiner) and it has a background color : #fff property. When mouse over we'll change background color to #efefef and when mouse out we'll rollback color.
It's a simple jquery trick. Let's start
First import latest jquery into your html page :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
$(window).load(function() {
$('.conteiner').mouseenter(function(){
$(this).animate({ backgroundColor: "#efefef" }, "fast");
$('.conteiner').mouseleave(function(){
$(this).animate({ backgroundColor: "#ffffff" }, "fast");
Now you can ask "Why we didnt use onMouseOuver and onMouseOut functions?" You can try if conteiner (div that we change background color) is empty you'll get the same result. But when we add some children divs or some text in it the result will change. Animation will start to repeat itself couse of children div or what we have in main div.
So we use onMouseEnter and onMouseLeave functions. You can find more visual and attractive animations on jquery homepage.