New Effects Added by jQuery UI

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.

$23.99    $12.00
by Dan Wellman | June 2011 | Open Source

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 by Dan Wellman, author of jQuery 1.4 Animation Techniques: Beginners Guide, takes a look at the effects added by jQuery UI, the official UI library built on top of jQuery.

 

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 related to this subject, see here.)

jQuery UI gives us 14 new predefined animations to use in our pages; these are listed, together with a brief description of their usage, as follows:

Animations

Description

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.

clip

The target element is shown or hidden by moving opposing edges in towards the center of the element, or out to its full width or height.

drop

The element appears to drop onto or off of the page in order to show or hide it respectively.

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.

fold

The element appears to fold closed or open.

highlight

The background-color of the target element is set (to yellow by default, although this is configurable), and then fades away after a short interval.

puff

The target element increases in size slightly and then fades away.

pulsate

The target element's opacity is adjusted a specified number of times, making the element appear to flicker on and off.

scale

The dimensions of the target element are adjusted to increase or decrease its size.

shake

The target element is shaken a specified number of times. This effect is similar to the bounce effect with the key difference that the distance of the shake remains the same on each iteration of the animation.

size

The dimensions of the target element are adjusted to increase or decrease its size. This effect is almost identical to scale.

slide

The target element is made to slide in or out of view, horizontally or vertically.

transfer

The outline of the specified element is transferred to another element on the page.

Using the effect API

jQuery UI introduces the effect() method which can be used to trigger any of the effects listed in the previous table. 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.

Each effect has custom configuration options that can be set to control how the effect displays. These options are set in a configuration object which is passed to the effect() method as the second argument, following the name of the effect.

We can also supply a duration for the effect as an argument. As with standard jQuery animations, we can supply either an integer representing the duration of the effect in milliseconds, or one of the strings slow or fast.

If no configuration is required, the duration may be passed to the effect() method as the second argument. If no duration is supplied, the default duration of 400 milliseconds will be used.

Optionally, a callback function may be provided as the final argument. The supplied function will be executed once for each selected element when the effect ends.

Let's look at the following example of how the effect() method can be used.

The bounce effect

The bounce effect is similar to, but much more controllable than, the easeOutBounce easing function. It can be used with either the effect API or show/hide logic depending on your requirements.

Configuration options

The following configuration options are available for the bounce effect:

Option

Default

Usage

direction

"up"

The direction of bounce. The other possible option is the string down.

distance

20

The initial distance of bounce (successive bounces reduce in distance) in pixels.

mode

"effect"

Whether to run the effect normally or use show/hide logic. Other values accepted may be the strings show, hide, or toggle.

times

5

The number of bounces.

Summary

In this article we looked at the complete range of new effects which are added by the jQuery UI library. We looked at how they can be used with the effect() method.


Further resources related to 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: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Dan Wellman

Dan Wellman is an author and frontend engineer living on the South Coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the Tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

Books From Packt


WordPress 3.0 jQuery
WordPress 3.0 jQuery

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

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

PHP jQuery Cookbook
PHP jQuery Cookbook

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

Blender 2.5 HOTSHOT
Blender 2.5 HOTSHOT

Python 2.6 Graphics Cookbook
Python 2.6 Graphics Cookbook


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