jQuery Animation: Tips and Tricks

This book and eBook will enable you to quickly master all of jQuery’s animation methods and build a toolkit of ready-to-use animations using jQuery 1.4.


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.)

Fading animations
Tip: The fadeIn() and fadeOut() methods perform the least complex animations available via jQuery. They simply adjust the opacity of selected elements to either show or hide the element, and can be used with no additional configuration. The fadeToggle() method is almost as simple, but does provide some basic logic to check the selected element's current state.
In their simplest forms, these methods can be used without any additional configuration. We can simply call the methods on any collection of selected elements without using any arguments:


When no arguments are provided, the animations will have the default duration of 400 milliseconds and the default easing of swing.
With arguments, the fading methods may take the following form, (square brackets denote optional arguments):

jQuery(elements).fadeIn([duration], [easing], [callback]);
jQuery(elements).fadeOut([duration], [easing], [callback]);
jQuery(elements).fadeToggle([duration], [easing], [callback);

Viewing the queue
Tip: To view the queue we simply call the queue() method; no arguments are required but we can optionally supply the queue name if it differs from the default fx. When the method is called, it returns an array containing the remaining functions in the queue. The queue() method may be used in the following form:

jQuery(elements).queue([queue name], [new queue], [callback]);

Ensuring custom queues iterate correctly
Tip: When we create custom queues, the chained methods are not automatically called for us. This is something we need to do manually and is handled using the dequeue() method.
When called, it will remove the next function in the queue and execute it. It's a simple method, with few arguments, and is used in a very specific manner. The method may take a single optional argument which is the name of the queue to execute the next function from:

jQuery(elements).dequeue([queue name]);

Stopping an animation
Tip: The stop() method can be used to stop an effect that is currently running on the selected element. In its simplest form, we may call the method without supplying any additional arguments, but if necessary we can supply up to two Boolean arguments. The method takes the following format:

jQuery(elements).stop([clear queue], [jump to end]);

Globally disabling animations
Tip: One property of fx that we can set is the off property. This property contains a Boolean that is set to false by default, but which we can set to true to globally disable all animations on a page. The property is set using the following syntax:

jQuery.fx.off = true;

That's all we do need to do. If this is set at any point in our script, all elements that have animation methods attached to them will be set to their final state, as if the animation had already completed.

Quoting the class property
Tip: We need to use quotes around the property name class so that it works correctly in Internet Explorer. If we fail to quote it, IE will throw a script error stating that it expected an identifier, string, or number.

Using the effect API
Tip: jQuery UI introduces the effect() method which can be used to trigger any of the effects like blind (The target element is shown or hidden by rolling it down or up like a window blind.), bounce (The target element is bounced horizontally or vertically for a specified number of times.), explode (The explode effect causes the target element to separate into a specified number of pieces before fading away, or to fade into view in several pieces before coming together to form the complete element.) and so on. The effect() method's usage pattern is as follows:

jQuery(elements).effect(effect name, [configuration], [duration],

The name of the effect that we would like to use is always the first argument of the effect() method. It is supplied in string format.

Marquee text
Tip: The use of the <marquee> element is an effective and attractive way to present potentially relevant content to the visitor without taking up too much content space. It won't suit all sites of course, but used sparingly, and in as non-intrusive a way as possible, it can be a great effect.

jQuery and transforms
Tip: We can use jQuery's css() method in setter mode to set CSS3 transforms on selected elements, and we can use it in getter mode to retrieve any transform functions set on an element. We just need to ensure that we use the correct vendor prefix, such as –moz-transform for Firefox, or -webkit-transform for Webkit-based browsers. Opera also has its own vendor prefix, as do newer versions of IE.
One thing to be aware of is that while we can set a specific transform function, such as rotate(), on a selected element, we can only get the value of the style property in its matrix format. Look at the following code:

$("#get").css("-moz-transform", "rotate(30deg)");

This would result in the following:

jQuery Animation: Tips and Tricks

In the previous screenshot, we see that the rotation we applied in the first line of code using the rotate() transform function is returned with the second line of code as a matrix function.


This article took a look at some tips and tricks for creating web page animations using jQuery.

Further resources on this subject:

Books to Consider

comments powered by Disqus

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free