jQuery UI effects

effects.core.js

The jQuery UI effects depends heavily on this file This file is utilizes by all other methods and can be also be used stand-alone. Please note that ui.core.js is not a dependency for the effects to work.

Methods for effects

You can add animation in a number of ways , a lot of methods extends existing jQuery methods.

Basic effect transition

The easiest way to apply animation is by invoking effect() method on any element and set their attribute options, speed and callback If you want to use an animation with a hide, show or toggle effect , see the next section

Effect - Direct way to apply an animation to any element

Visibility Transitions

These effect extend the base class API to bring visual transitions to the standard hide, show and toggle visibility functions in jQuery. All the standard animation types are supported.

Show - As an element is being shown, animate it's entrance
Hide - As an element is being hidden, animate it's exit
Toggle - As an element is being toggled between show or hide states, animate the transition

Color Transitions

The jQuery UI effects core extends the animate function to be able to animate colors as well. These transitions can animate the background and border colors and accept colors specified in hex, rgb and color names. This is used extensively by the class transition effects in the next section.

Animate - Animate background and border colors

Class Transitions

The jQuery UI effects core extends the base class API to be able to animate between classes. This is a very powerful way script complex animations because these effects analyze the differences between the style attributes of the classes and automatically builds parallel animations to transform between the various style attributes that are different. Any style attribute that contains a numeric value will be animated, from hex colors to dimensions, padding, margins, border thickness, positioning, font size, line-height and more will automatically animate.

addClass - Adds a class to elements with an animated transition between the states.
removeClass - Adds a class to elements with an animated transition between the states.
toggleClass - Adds a class if it is not present, and removes the class if it is present with an animated transition.
switchClass - Switches between one class and another with an animated transition.

Effects that can be used with Show/Hide/Toggle:

Blind - Blinds the element away or shows it by blinding it in.
Clip - Clips the element on or off, vertically or horizontally.
Drop - Drops the element away or shows it by dropping it in.
Explode - Explodes the element into multiple pieces.
Fade - Fades the element, by gradually changing its opacity.
Fold - Folds the element like a piece of paper.
Puff - Scale and fade out animations create the puff effect.
Slide - Slides the element out of the viewport.
Scale - Shrink or grow an element by a percentage factor.

Effects that can be only used stand-alone:

Bounce - Bounces the element vertically or horizontally n-times.
Highlight - Highlights the background with a defined color.
Pulsate - Pulsates the opacity of the element multiple times.
Shake - Shakes the element vertically or horizontally n-times.
Size - Resize an element to a specified width and height.
Transfer - Transfers the outline of an element to another.

To see arguments of these methods click here

Example : UIeffects.html

<!DOCTYPE html>

            <html>

            <head>

            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui

            /1.8/themes/base

            /jquery-ui.css" 
            rel="stylesheet" type="text/css"/>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery

            /1.4/jquery.min.js">

            </script>

            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui

            /1.8/jquery-ui.min.js">

            </script>

            <style type="text/css">

            .toggler { width: 500px; height: 200px; }

            #button { padding: .5em 1em; text-decoration: none; }

            #effect { 

            width: 240px; height: 135px; padding: 0.4em; position: relative; 

            }

            #effect h3 { margin: 0; padding: 0.4em; text-align: center; }

            </style>

            <script type="text/javascript">

            $(function() {

            

            //run the currently selected effect

            function runEffect(){

            //get effect type from 

            var selectedEffect = $('#effectTypes').val();

            

            //most effect types need no options passed by default

            var options = {};

            //check if it's scale or size - they need options explicitly set

            if(selectedEffect == 'scale'){ options = {percent: 100}; }

            else if(selectedEffect == 'size'){ options = 

            { to: {width: 280,height: 185} }; }

            

            //run the effect

            $("#effect").show(selectedEffect,options,500,callback);

            };

            

            //callback function to bring a hidden box back

            function callback(){

            setTimeout(function(){

            $("#effect:visible").removeAttr('style').hide().fadeOut();

            }, 1000);

            };

            

            //set effect from select menu value

            $("#button").click(function() {

            runEffect();

            return false;

            });

            

            $("#effect").hide();

            });

            </script>

            

            </head>

            <div class="demo">

            

            <div class="toggler">

            <div id="effect" class="ui-widget-content ui-corner-all">

            <h3 class="ui-widget-header ui-corner-all">

            jQuery UI effects with show</h3>

            <p>

            These effects are UI effects and need to include jquery-ui.min.js 

            to run these 
            effects. 

            </p>

            </div>

            </div>

            

            <select name="effects" id="effectTypes">

            <option value="blind">Blind</option>

            <option value="bounce">Bounce</option>

            <option value="clip">Clip</option>

            <option value="drop">Drop</option>

            <option value="explode">Explode</option>

            <option value="fold">Fold</option>

            <option value="highlight">Highlight</option>

            <option value="puff">Puff</option>

            <option value="pulsate">Pulsate</option>

            <option value="scale">Scale</option>

            <option value="shake">Shake</option>

            <option value="size">Size</option>

            <option value="slide">Slide</option>

            </select>

            

            <a href="#" id="button" class="ui-state-default ui-corner-all">

            Click to preview 
            Effect</a>

            

            

            </div>

            

            <div class="demo-description">

            

            <p>Select the effect and click the button to preview the effect.</p>

            

            </div>

            </body>

            </html>

Output :

Click here to see online demo

Download Source Code

Learn from experts! Attend jQuery Training classes.

jQuery UI effects