JQuery Animation Reference

Can be used without additional parameters
.animate()
Perform a custom animation of a set of CSS properties.

.clearQueue()
Remove from the queue all items that have not yet been run.

.delay()
Set a timer to delay execution of subsequent items in the queue.

.dequeue()
Execute the next function on the queue for the matched elements.

.fadeIn()
Display the matched elements by fading them to opaque.

.fadeOut()
Hide the matched elements by fading them to transparent.

.fadeTo()
Adjust the opacity of the matched elements.

.fadeToggle()
Display or hide the matched elements by animating their opacity.

jQuery.fx.interval
The rate (in milliseconds) at which animations fire.

jQuery.fx.off
Globally disable all animations.

.hide()
Hide the matched elements.

.queue()
Show the queue of functions to be executed on the matched elements.

.show()
Display the matched elements.

.slideDown()
Display the matched elements with a sliding motion.

.slideToggle()
Display or hide the matched elements with a sliding motion.

.slideUp()
Hide the matched elements with a sliding motion.

.stop()
Stop the currently-running animation on the matched elements.

.toggle()

Require additional parameters
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.

    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });

Pulsate indefinitely:

           function pulsate() {
               $('#icon').fadeOut('slow', function () {
                   $('#icon').fadeIn('slow', function () {
                       pulsate();
                   });
               });
           }

Apply effect to multiple elements:

elements = $('div');

for (var i = 0; i < elements.length; i++) {                   
    elements.eq(i).delay(50 * i).effect("bounce",{times:1});
}​


Note:
Any snippets may have been condensed from their original sources for brevity. See references for original articles.

All server side code examples are in C# .Net.

References:
JQuery UI, http://docs.jquery.com/UI/Effects
Stack Overflow, http://stackoverflow.com/questions/3221442/jquery-animation-help

Advertisements

About Ronnie Diaz

Ronnie Diaz is an enterprise software engineer responsible for front-end and back-end development for companies in many industries. Heavily involved in cloud development, online retail, e-commerce and electronic ordering, fulfillment and customer relational systems.

Posted on February 4, 2011, in Programming & Development and tagged , , , , , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: