JAVASCRIPT

Cancel, Queue and Pause Animations with the GX JavaScript Animation Framework

In this eighth part of a series, I discuss how to cancel, pause and resume animations with the GX JavaScript library. You'll see that performing these tasks, as with many of the tricks you can make the GX library do, is a straightforward process.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

February 08, 2010

TABLE OF CONTENTS:

Among the features that can be used for controlling the proper execution of a certain animation, the GX library has one that's particularly useful. It permits you to cancel a specified effect. If you think about it carefully, incorporating this ability makes a lot of sense; in many cases, users won't want to wait until an effect finishes running. Therefore, providing them with the ability to cancel it is often desirable.

Luckily, GX includes an additional method, called "gxInit()," for canceling an animation in a pretty straightforward fashion. However, the best way to understand the ins and outs of this process is by example. Thus, here's one that shows how to stop a queued effect when the mouse is placed out of the target div:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Using the GX Animation Library</title>

// canceling an animation

$(document).ready(function(){

$('#container').gxInit({queue: 'cancel'});

$('#container').hover(function(){

$('#container').gx({'width': 600}, 1000, 'Linear');

}, function(){

$('#container').gx({'width': 300}, 1000, 'Linear');

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

}

</style>

</head>

<body>

<h1>Using the GX Animation Library</h1>

<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.</p>

</div>

<h2>Canceling an animation</h2>

<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

In this example, the "gxInit()" method is used to specify that any queued animations assigned to the selected div should be canceled when the event that fired up the effects no longer exists. This seemingly-complex task produces an incredibly simple result: the div will expand its width as long as the mouse is over it. Otherwise, it'll return to its initial state. Just for fun, give this example a try on your browser and you'll see that it works like a charm.

Okay, you should now feel a bit happier, since you've learned how to create queued animations, and how to cancel them in a simple manner. So, what's the next step Well, GX also comes with the to pause and resume effects, a feature that can be extremely useful for obvious reasons. If you're addicted to watching videos on YouTube, you'll definitely know what I'm talking about.

If you're interested in learning the inner workings of pausing and resuming animations with the GX library, in the final section of this tutorial I'll be coding an example that will show how to perform this process in a few easy steps.

Now, jump ahead and read the following section.

Next: Pausing and resuming animations >>