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:

<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>Pausing and resuming 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>

As you can see above, pausing and resuming an effect is as simple as passing the strings "pause" and "resume" to the "gx()" method. In addition, you should notice that the previous example also dynamically adds two links to the web page via the jQuery "append()" method, which is handy for triggering the corresponding actions when they're clicked. The following figure shows the different states of this animation, along with the "pause" and "resume" links mentioned before:

Mission accomplished. With this final code sample, we've come to the end of this eighth part of the series. Hopefully, at this stage you should have a clearer idea of how to control, at least at a basic level, the execution of animations with GX, but if you still have some doubts on this topic, I suggest that you create your own examples and play around with them for a while.

Final thoughts

That's all for the moment. In this eighth installment of the series, I discussed how to cancel, pause and resume animations with the GX library. From the examples shown previously it's clear to see that performing these tasks is a straightforward process that can be mastered with minor hassles.

In the forthcoming chapter, things will become even more interesting. I'll be explaining how to use the familiar "gx()" method for toggling the values assigned to the properties of an HTML element.

Don't miss the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.