DAY 2: Fading Background Color With jQuery .animate()
Continuing from “DAY1: Horizontal Sliding Panel With jQuery“, today we would like to take a look at another effect that we can create using the .animate() function.
Today i would like to experience with you another effect that is widely used these days, the Background Color Fading effect on hover. We’ll have a block of content that when the mouse moves over the backgroundColor starts an animation where it changes to another. When the mouse is moved off, the animation to the starting backgroundColor is triggered.
Let’s have a sneak peak about what we are going to create today.
Check out the demo of “Fading Background Color With jQuery”.
Fading Background Color With jQuery
1st. Step: Linking to the jQuery Library hosted on Google Code
To follow the tutorial you’ll need a copy of the latest version of jQuery UI; it can be downloaded using the jQuery UI download builder at http://jqueryui.com/download. jQuery UI is the official library of widgets and utilities built on top of jQuery; it’s very easy to use and theme.
Instead of hosting the source code yourself, you could link directly to the most recent version hosted on the Google Ajax Libraries API. This will increase the performance of your website a lot. After including this on your page, we’ll get started by creating our simlple .animate() function.
<!-- include jQuery Library From Google Code --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
We will also need to include the jQuery UI
<!-- include jQuery UI From Google Code--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
Another way to do this:
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.0");
2nd Step: Running The Code when the DOM is Ready
This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
$(document).ready(function() {
// put all your jQuery goodness in here.
});
You can read more about it : Introducing $(document).ready()
Using the .animate() Function
The fun part starts now with the .animate() function.
Demo2: Fading Background Color With jQuery
Fading Background Color With jQuery
The effect that we want to create is slowly fading the background color into a different color on .hover() . It will act as some sort of transition until we get the final background color.
The Markup
<body> <div id="container"> <h1>Background Color Animation With jQuery</h1> <h2>The Box Color Animates to a Different color On Hover Effect</h2> <div class="content"> <div class="boxes"> <div class="block"> <h4>/ <a href="">Design</a> / <a href="">Photoshop</a></h4> <img src="09.jpg" alt="" /> </div> <div class="info"> <h3><a href="http://devsnippets.com/article/designing-with-html5-css3.html">Designing for the Future with HTML5 CSS3</a> </h3> </div> <p>Dolody lets you share your experiences and discover new design techniques with your friends.</p> </div><!-- END OF BOXES --> </div> <p><a href="#" title="DAY 2: Fading Background Color With jQuery .animate()">Click here to return to the tutorial on DevSnippets</a></p> </div> </body>
Styling with CSS
Now that the slider structure is in place we’ll add some styles to hide the slidery. Overflow must be set to hidden to the block that carries the slider. This will ensure that the slider is kept hidden when the mouse is not hovered on the block carrying the slider until the position of the slider changes to fit.
body {
background:#ccc;
text-align:left;
color:#333;
width:800px;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}
a{
color:#333;
text-decoration:none
}
a:focus {
outline: none;
}
h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#dff161;
font-weight:700;
padding:20px 0 0;
text-shadow:0 1px 1px #333;
}
h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#333;
font-weight: 400;
padding: 0 0 10px;
text-shadow:0 1px 1px #708819;
}
h3, h3 a{
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#333;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}
p {
color:#333;
float:left;
line-height:22px;
margin:5px;
padding:0 0 10px;
}
#container {
margin: 0;
padding: 0;
}
.boxes {
background:#fff;
border:1px solid #ccc;
float:left;
padding:10px;
position:relative;
width:510px;
}
img {
border:5px solid #CCCCCC;
}
div.info {
border-bottom:1px solid #CCCCCC;
float:left;
margin:0;
padding:0;
width:100%;
}
.block {
color:#0066CC;
float:left;
overflow:hidden;
position:relative;
width:510px;
}
.block h4, .block h4 a{
color:#333333;
font-size:11px;
padding:5px 0;
text-shadow:0 1px 1px #DFF161;
text-transform:uppercase;
}
Animating with jQuery
The div element that has a class of ‘.boxes‘ is the block that we want to fade its color. The jquery code will be wrapped inside the <script></script> tag. Here it is:
<script type="text/javascript">
$(document).ready(function(){
$(".boxes").hover(function() {
$(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
$(this).stop().animate({ backgroundColor: "#ffffff" }, 800);
});
});
</script>
There is one action in the code above. When the mouse moves over the .boxes element, the backgroundColor starts an animation where it changes to #a7bf51 over 0.8 seconds. When the mouse is moved off the animation to the starting backgroundColor #ffffff is triggered.
Using the .stop() method before the animate() fixes the animation queue buildup where the animation will loop repeatedly by moving your mouse back and forth over the item.
Another pretty easy effect, what do you think?
Check out the demo of “Fading Background Color With jQuery”.
To Be Continued on DAY 3…
Author: Noura Yehia
Noura Yehia is a Web Designer, Blogger and Creative Thinker. Founder of Noupe.com a popular blog about web design, tutorials, resources and inspiration. If you’d like to connect with her, you can follow her on Twitter or at her blog Devsnippets.
21 Comments
jQuery .animate() - DAY 1: Horizontal Sliding Panel With jQuery | DevSnippets
Apr 12, 2025 @ 04:15:18
[...] To Be Continued on DAY 2… [...]
Reply
designfloat.com
Apr 12, 2025 @ 04:34:04
DAY 2: Fading Background Color With jQuery .animate() | DevSnippets…
Today i would like to experience with you another effect that is widely used these days, the Background Color Fading effect on hover. We’ll have a block of content that when the mouse moves over the the backgroundColor starts an animation where it chan…
Reply
Willem Baas
Apr 12, 2025 @ 04:44:54
Thanks for the article. I was looking for this fading technique.
Reply
Me
Apr 12, 2025 @ 05:37:10
A simple, easy to implement effect. I did something similar with buttons, I had a dark BG color and set the initial opacity of the buttons to 0.5 and on roll-over gave them an animated opacity of 1.0. These techniques really bring out the images and content within.
Thanks
Reply
Jordan Walker
Apr 12, 2025 @ 06:15:49
That is a really neat and unique effect.
Reply
Beben
Apr 12, 2025 @ 10:55:14
nice…good
thanks a lot
Reply
Sean Thompson
Apr 12, 2025 @ 11:09:35
We’ve been using this effect on our website! Please check it out to see a great working demo of this effect!
Reply
MInnesota SE
Apr 12, 2025 @ 20:27:51
Nice! Couldn’t have found this at a better time. I wish I could digg it twice!
Reply
diziizle
Apr 13, 2025 @ 18:11:01
thanks nice!
Reply
Slick Drop down Menu with Easing Effect Using jQuery & CSS | DevSnippets
Apr 14, 2025 @ 04:02:23
[...] from “DAY2: Fading Background Color With jQuery .animate()“, today we would like to take a look at another effect that we can create using the [...]
Reply
Slick Drop down Menu with Easing Effect Using jQuery & CSS - Programming Blog
Apr 14, 2025 @ 12:53:59
[...] from “DAY2: Fading Background Color With jQuery .animate()“, today we would like to take a look at another effect that we can create using the [...]
Reply
saroz poddar
Apr 16, 2025 @ 06:03:12
this is good. But i’m new for web design.
And i’ve to lern to many knowledge about javascript it means basic ideas about it.
Reply
DAY 2: Fading Background Color With jQuery .animate() | DevSnippets | Source code bank
Apr 23, 2025 @ 12:23:26
[...] the original: DAY 2: Fading Background Color With jQuery .animate() | DevSnippets If you enjoyed this article please consider sharing [...]
Reply
builder
Apr 25, 2025 @ 09:48:16
Great tutorial.
Thanks!
Reply
kepl
Apr 30, 2025 @ 09:41:35
works grreat!!!!! thanks!
Reply
Gadget Newz
May 02, 2025 @ 07:15:44
[...] Fading Background Color With jQuery .animate() [...]
Reply
sesli sohbet siteleri
Jun 02, 2025 @ 20:27:22
thanks lowe you sana sancem…..
Reply
Slick Drop down Menu with Easing Effect Using jQuery & CSS | Feed-Syndicate
Jun 03, 2025 @ 06:15:14
[...] from “DAY2: Fading Background Color With jQuery .animate()“, today we would like to take a look at another effect that we can create using the [...]
Reply
wie ajuz
Feb 19, 2025 @ 05:05:24
Great tutorial, thanks for sharing, i use your code to my current project
Reply
20 Background Effects using jQuery with 19 Excellent Examples | RockingCode
Mar 20, 2025 @ 22:33:51
[...] Download [...]
Reply
James
Aug 07, 2025 @ 03:34:52
Thanks so much. Helped me alot
Reply