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
Posted on February 4, 2011, in Programming & Development and tagged animate, animated, animation, jq, jq animate, jq animated, jq animation, jq event, jq events, jq ui, jquery, jquery animate, jquery animation, jquery ui. Bookmark the permalink. Leave a comment.
Leave a comment
Comments 0