jQuery Animation: Tips and Tricks

Exclusive offer: get 50% off this eBook here
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery 1.4 Animation Techniques: Beginners Guide — Save 50%

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.

€18.99    €9.50
by Dan Wellman | April 2011 | Open Source Web Development

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML, and is the most popular JavaScript library in use today. Using the features offered by jQuery, developers are able to create dynamic web pages. This article will take a look at some tips and tricks for creating web page animations using jQuery, such as:

  • Fading animations
  • Globally disabling animations
  • Using the effect API

 

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:

jQuery(elements).fadeIn();
jQuery(elements).fadeOut();
jquery(elements).fadeToggle();

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],
[callback]);

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)");
$("#get").text($("#get").css("-moz-transform"));

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.

Summary

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


Further resources on this subject:

jQuery 1.4 Animation Techniques: Beginners Guide 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.
Published: March 2011
eBook Price: €18.99
Book Price: €30.99
See more
Select your format and quantity:

Resources for Article :


jQuery 1.4 Animation Techniques: Beginners Guide by Dan Wellman

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Django JavaScript Integration: AJAX and jQuery
Django JavaScript Integration: AJAX and jQuery

jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

PHP jQuery Cookbook
PHP jQuery Cookbook

CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery

WordPress 3.0 jQuery
WordPress 3.0 jQuery

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software