Home arrow JavaScript arrow Customizing jQuery Slideshows: the animate() Method
JAVASCRIPT

Customizing jQuery Slideshows: the animate() Method


In this penultimate chapter of the series, I develop another interesting variation on the original jQuery slide show. This time it's built using the handy and versatile “animate()” method.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
October 20, 2011
TABLE OF CONTENTS:
  1. · Customizing jQuery Slideshows: the animate() Method
  2. · Introducing the animate() method

print this article
SEARCH DEVARTICLES

Customizing jQuery Slideshows: the animate() Method
(Page 1 of 2 )

If you think that developing an easily customizable slide show using only some native jQuery methods is a complicated process, then focus your attention on this article series. In an approachable fashion, you’ll learn how to implement a “plug-in free” slide show on your own web pages, which you’ll be able to tweak at will.

In earlier chapters of this series, I demonstrated how to build the aforementioned slide show from scratch. I also showed you how easy it is to tweak its transition effects by using different jQuery animations methods, such as “fadeTo(),” “hide()/show()” and “slideUp()/slideDown().”

While the functionality offered by these methods is more than enough to create appealing variations of the original slide show, there’s one additional jQuery method that hasn’t been covered yet. It can also yield quite satisfactory results. As you may have guessed, I’m talking about the handy “animate(),” which you'll surely be familiar with; it’s the library’s most popular animation method.

In this penultimate chapter of the series, I’ll be setting up yet another version of the initial slide show. This time, it will exploit the functionality of “animate()” to implement the corresponding transition between the slide show’s images.

Ready to learn the full details of this enhancement process? Then let's get started.     

Recap: creating transition effects with the “slideUp()” and “slideDown()” methods

Just in case you missed the preceding tutorial of the series, where I explained how to apply a transition effect to the slide show’s images with the “slideUp()/slideDown()” methods, below I listed the source for this specific example. This way, you can analyze it in depth and quickly grasp its driving logic.

First, here is the (X)HTML document containing the slide show’s markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple slideshow with jQuery using the slideUp()/slideDown() methods</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <h2>jQuery-based Slideshow</h2>
        <ul id="slideshow">
            <li><img src="images/img1.jpg" /></li>
            <li><img src="images/img2.jpg" /></li>
            <li><img src="images/img3.jpg" /></li>
            <li><img src="images/img4.jpg" /></li>
            <li><img src="images/img5.jpg" /></li>
            <li><img src="images/img6.jpg" /></li>
        </ul>
        <ul id="controls">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

That’s pretty easy to follow, right? So take a look at the following CSS file. It is responsible for spicing up the slide show’s container, along with the corresponding controls, with some fancy background images (to get the images in question, be sure to download them from here http://www.devhardware.com/forums/attachment.php?attachmentid=10999).

Here’s the file:

(css/styles.css)

body {
    background-color: #03426a;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #9fffff; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 800px;
    margin: 0 auto;
}
/* header, main and footer elements */
#header, #footer {
    padding: 10px;
}
#main {
    padding: 10px;
    position: relative;
}
/* slideshow container */
ul#slideshow {
    width: 599px;
    height: 627px;
    margin: 0 auto;
    background: transparent url("../images/frame.png") center center no-repeat;
    position: relative;
}
/* slideshow controls container */
ul#controls {
    position: absolute;
    top: 650px;
    left: 309px;
    overflow: hidden;
}
ul#controls li {
    float: left;
    width: 30px; 
}
/* slideshow controls */
ul#controls li a {
    display: block;
    width: 30px;
    height: 35px;
    background: #eee url("../images/button_sprite.png") 0 0 no-repeat;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 35px;
    text-shadow: 1px 1px 1px #fff;
    color: #000;
}
ul#controls li a:hover {
    background-position: -30px 0;
}

Assuming you understand how the above CSS file does its thing, check the one below. It makes the slide show work as intended, in this case by using the “slideUp()” and “slideDown()” methods:

(js/slideshow.js)

$(document).ready(function () {
    // position absolutely all the <li> elements within the slide show
    $('#slideshow li').css({
        'position': 'absolute',
        'top': '92px',
        'left': '99px',
        'z-index': 0,
        'display': 'none'
    });
   
    // add the 'current' class to the first element of the slide show and make it visible
    $('#slideshow li:first-child')
        .addClass('current')
        .show();

    // display an element of the slide show according to the link clicked
    $('#controls a').click(function () {
        var li = $('#slideshow li:eq(' + $('#controls a').index(this) + ')');
        // do nothing when clicking on the current <li> element
        if (li.hasClass('current')){return};
        // push the previous element back to lowest layer (z-index = 0) and hide it from view
        $('.current')
            .css('z-index', 0)
            .removeClass('current')
            .stop()
            .slideUp('slow');

        // bring the current element to the front layer (z-index = 10) and make it visible
        li
            .css('z-index', 10)
            .addClass('current')
            .stop()
            .slideDown('slow');
    });
});

The inner workings of the previous script were discussed in detail before. Thus, you should only pay attention to the bits where each image in the slide shown is alternately hidden and displayed. As I just said, this process is carried out via the complementary “slideUp()” and “slideDown()” methods.

What’s more, if you test the script in its current version, you should be able to see more clearly how the implementation of this animation effect makes the behavior of slide show a bit more appealing. Of course, there’s no shortage of options for animating HTML elements with jQuery.

Therefore, in the upcoming section I’ll be demonstrating how to produce a slightly different version of the current slide show. As noted in the introduction, it will use the “animate()” method to create a soft transition between the target images.

To see how this will be done, click on the link that appears below and keep reading.  


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials