We all have seen all those fancy jQuery plugins and said wow. What if you just need to add a simple animation or transition effect to your design without the need to use any jQuery plugin.

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects. In this post series, we’ll closely examine the .animate() function, and today we will just give you an introduction to what this function can do and a demonstration of “Horizontal Sliding Panel With jQuery“.

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 “Horizontal Sliding Panel With jQuery”.

Horizontal Sliding Panel With jQuery

1st. Step: Linking to the jQuery Library hosted on Google Code

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 first .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. I created 3 different demos to show you how we can have different animation effect with only one function.

Description:

.animate( properties, [ duration ], [ easing ], [ callback ] )

Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property.
All animated properties should be numeric; properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

Demo1: Horizontal Sliding Panel With jQuery

Horizontal Sliding Panel With jQuery
We will start by sliding a panel horizontally on .hover(). It will act as some sort of drawer to reveal hidden information.

The Markup

<body>
<div id="container">
	<h1>Horizontal Sliding Panel With jQuery</h1>
		<h2>The Panel Slides 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="http://www.devsnippets.com/img/advanced-css/type4.jpg" alt="" height="265px" width="500px" />
				<div class="cover slider">
                    <p>Utamur recteque cotidieque usu cu, est cu feugait praesent, nec apeirian cotidieque id. Nam aperiri verterem insolens cu, te his inermis posidonium reprimique, ne scripta atomorum concludaturque cum.</p>
                </div>
             </div>
             <div class="info">
                  <h3><a href="http://devsnippets.com/article/designing-with-html5-css3.html">Designing for the Future with HTML5 CSS3 : Tutorials and Best Practices</a></h3>
             </div>
             <p>Dolody lets you share your experiences and discover new designs with your friends everywhere you go. Get started today on your iPhone.</p>
        </div>
<!-- END OF BOXES  -->
	</div>
		<p><a href="#" title="How To Create A Horizontal Sliding Panel With jQuery">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:#1a1a1a;
      text-align:left;
      color:#333;
      width:700px;
      font-size:14px;
      font-family:georgia, 'time new romans', serif;
      margin:0 auto;
      padding:0;
}
a{
      color:#de93c3;
      text-decoration:none
}
h1 {
      font-size: 34px;
      font-family: verdana, helvetica, arial, sans-serif;
      letter-spacing:-2px;
      color:#c13d93;
      font-weight:700;
      padding:20px 0 0;
      text-shadow:0 1px 1px #000000;
}
h2 {
      font-size: 24px;
      font-family: verdana, helvetica, arial, sans-serif;
      color:#de93c3;
      font-weight: 400;
      padding: 0 0 10px;
      text-shadow:0 1px 1px #C13D93;
      }
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:#7F7F7F;
     float:left;
     line-height:22px;
     margin:5px;
     padding:0 0 10px;
}
.boxes {
     background:none repeat scroll 0 0 #FFFFFF;
     border:1px solid #ccc;
     float:left;
     padding:10px;
     position:relative;
     width:510px;
}
img {
     border:5px solid #CCCCCC;
     height:230px;
}
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:#1A9CD6;
     font-size:11px;
     padding:5px 0;
     text-transform:uppercase;
     }
.slider{
     background:url("mash.jpg") repeat-x scroll 0 0 #000000;
     border-top:5px solid #333333;
     float:left;
     list-style-type:none;
     margin:0;
     padding:3px 0 0 10px;
     position:absolute;
     top:295px;
     width:510px;
}

Animating with jQuery

The div element that has an id of ‘#block‘ and the sliding panel has a class of ‘.slider‘. This code will be wrapped inside the <script></script> tag. Here it is:

     $(document).ready(function(){
       //Full Box Sliding (Hidden to Visible)
	   $('.block').hover(function(){
	        $(".cover", this).stop().animate({top:'200px'},{queue:false,duration:160});
	        }, function() {
	        $(".cover", this).stop().animate({top:'295px'},{queue:false,duration:160});
	        });	     
     });

There is one action in the code above. When the mouse moves over the #block element, the .slider item starts an animation where it moves to the top: 200 over 0.6 seconds. When the mouse is moved off the animation to the starting position top:295 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.

That was pretty easy, what do you think?

Check out the demo of “Horizontal Sliding Panel With jQuery”.

Download Zip File.

To Be Continued on DAY 2…

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.