jQuery 1.4: Animating an Element’s Position

0
161
7 min read

 

jQuery 1.4 Animation Techniques: Beginners Guide

jQuery 1.4 Animation Techniques: Beginners Guide

Quickly master all of jQuery’s animation methods and build a toolkit of ready-to-use animations using jQuery 1.4

        Read more about this book      

(For more resources on jQuery, see here.)

The animate method

All custom animations with jQuery are driven with the animate() method. Despite the ability to animate almost any style property that has a numeric value, the method is simple to use and takes just a few arguments. The method may be used in the following way:

jQuery(elements).animate(properties to animate,
[duration],
[easing],
[callback]);

The first argument should take the form of an object where each property of the object is a style that we’d like to animate, very similar to how we would use jQuery’s css() method.

As I mentioned before, this can be any CSS style that takes a purely numerical argument (with the exception of colors, although with the jQuery UI library we can animate colors as well. Background positions cannot be animated by jQuery natively, but it is quite easy to animate this property manually.

Per-property easing

As of the 1.4 version of jQuery, we can apply different types of easing to each style property we are animating when using the animate() method. So if we are animating both the width and height of an element for example, we can use linear easing for the width animation, and swing easing for the height animation. This applies to the standard easing functions built into jQuery

To supply easing types to the animate() method on a per-property basis, we need to provide an array as the value of the property we are animating. This can be done using the following syntax:

jQuery(elements).animate({
property: [value, easingType]});

An alternative syntax for animate()

Instead of using the duration, easing, and callback arguments individually, we may alternatively pass a configuration object to the animate() method containing the following configuration options:

  • duration
  • easing
  • complete
  • step
  • queue
  • specialEasing

The first three options are the same as the arguments would be if we passed them into the method in the standard way. The last three are interesting however, in that we do not have access to them in any other way.

The step option allows us to specify a callback function that will be executed on each step of the animation. The queue option accepts a Boolean that controls whether the animation is executed immediately or placed into the selected element’s queue. The specialEasing option allows us to specify an easing function for each individual style property that is being animated, giving us easing on a per-property basis using the alternative syntax.

The pattern for this second method of usage is as follows:

jQuery(elements).animate(properties to animate, [configuration
options]);

Like most (but not all) jQuery methods, the animate() method returns a jQuery object so that additional methods can be chained to it. Like the other effect methods, multiple calls to animate() on the same element will result in an animation queue being created for the element. If we want to animate two different style properties at the same time, we can pass all required properties within the object passed to the animate() method as the first argument.

Animating an element’s position

The animate() method is able to animate changes made to any CSS style property that has a numeric value, with the exception of colors and background-positions. In this example, we’ll create a content viewer that shows different panels of content by sliding them in and out of view using the animate() method.

This type of widget is commonly used on portfolio or showcase sites and is an attractive way to show a lot of content without cluttering a single page. In this example, we’ll be animating the element’s position.

Time for action – creating an animated content viewer

We’ll start again by adding the underlying markup and styling.

  1. The underlying markup for the content viewer should be as follows:

    <div id="slider">
    <div id="viewer">
    <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472">
    <img id="image2" src="img/atari.jpg" alt="Atari TT030">
    <img id="image3" src="img/commodore16.jpg" alt="Commodore 64">
    <img id="image4" src="img/commodore128.jpg" alt="Commodore
    128">
    <img id="image5" src="img/spectrum.jpg" alt="Sinclair ZX
    Spectrum +2">
    </div>
    <ul id="ui">
    <li class="hidden" id="prev">
    <a href="" title="Previous">&laquo;</a></li>
    <li><a href="#image1" title="Image 1" class="active">Image
    1</a></li>
    <li><a href="#image2" title="Image 2">Image 2</a></li>
    <li><a href="#image3" title="Image 3">Image 3</a></li>
    <li><a href="#image4" title="Image 4">Image 4</a></li>
    <li><a href="#image5" title="Image 5">Image 5</a></li>
    <li class="hidden" id="next">
    <a href="" title="Next">&raquo;</a></li>
    </ul>
    </div>

  2. Save the file as animate-position.html.
  3. Next we should create the base CSS. By that I mean that we should add the CSS which is essential for the content-viewer to function as intended, as opposed to styling that gives the widget a theme or skin. It’s good practice to separate out the styling in this way when creating plugins so that the widget is compatible with jQuery UI’s Themeroller theming mechanism.
  4. In a new file in your text editor add the following code:

    #slider { width:500px; position:relative; }
    #viewer {
    width:400px; height:300px; margin:auto; position:relative;
    overflow:hidden;
    }
    #slider ul {
    width:295px; margin:0 auto; padding:0; list-style-type:none;
    }
    #slider ul:after {
    content:"."; visibility:hidden; display:block; height:0;
    clear:both;
    }
    #slider li { margin-right:10px; float:left; }
    #prev, #next { position:absolute; top:175px; }
    #prev { left:20px; }
    #next { position:absolute; right:10px; }
    .hidden { display:none; }
    #slide {
    width:2000px; height:300px; position:absolute; top:0; left:0;
    }
    #slide img { float:left; }
    #title { margin:0; text-align:center; }

  5. Save this in the css folder as animate-position.css, and don’t forget to link to the new stylesheet from the <head> of our page. Run the page in your browser now, before we get into the scripting, so that you can see how the widget behaves without the accompanying script. You should find that any image can be viewed by clicking its corresponding link using only CSS, and this will work in any browser. The previous and next arrows are hidden with our CSS because these will simply not work with JS turned off and the image titles are not displayed, but the widget’s core functionality is still fully accessible.

What just happened?

The underlying HTML in this example is very straightforward. We have an outer container for the content-viewer as a whole, then within this we have a container for our content panels (simple images in this example) and a navigation structure to allow the different panels to be viewed.

Some of the elements we’ve added style rules for in our CSS file aren’t hardcoded into the underlying markup, but will be created as necessary when needed. Doing it this way ensures that the content-viewer is still usable even when the visitor has JavaScript disabled.

One important point to note is that the #slide wrapper element that we create and wrap around the images has a height equal to a single image and a width equal to the sum of all image widths. The #viewer element on the other hand has both a width and a height equal to a single image so that only one image is visible at any one time.

With JavaScript disabled, the images will appear to stack up on top of each other, but once the #slide wrapper element has been created the images are set to float in order to stack up horizontally.

We’ll use easing in this example, so be sure to link to the easing plugin directly after the jQuery reference at the end of the <body>:

<script src="js/jquery.easing.1.3.js"></script>

LEAVE A REPLY

Please enter your comment!
Please enter your name here