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

Advertisement

About Ronnie Diaz

Ronnie Diaz is a software engineer and tech consultant. Ronnie started his career in front-end and back-end development for companies in ecommerce, service industries and remote education. This work transitioned from traditional desktop client-server applications through early cloud development. Software included human resource management and service technician workflows, online retail e-commerce and electronic ordering and fulfillment, IVR customer relational systems, and video streaming remote learning SCORM web applications. Hands on server experience and software performance optimization led to creation of a startup business focused on collocated data center services and continued experience with video streaming hardware and software. This led to a career in Amazon Prime Video where Ronnie is currently employed, building software and systems which stream live sports and events for millions of viewers around the world.

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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: