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.

Make sure to subscribe to our RSS Feed and follow us on Twitter to get updates on our new post series: jQuery .animate() function and what you can do with it.

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”.

Download Zip File.

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.