Web Development with jQuery (2015)
Part IV. Appendices
Appendix M. Animation and Easing Effects
Method |
Description |
Return Value |
animate( |
Animates an element's styles, from the styles an element begins with, to the styles specified in an object literal provided to the first argument. At the time of this writing, only CSS properties with numeric values are supported. Animating color transitions is supported with additional plugin support. |
jQuery |
animate( |
Animates an element's styles, from the styles an element begins with to the styles specified in an object literal provided to the first argument. See the “Animation Options” section later in this appendix. |
jQuery |
clearQueue([queue]) |
Removes from the queue all items that have not been executed yet. If a queue is specified, only that queue is cleared. |
jQuery |
delay(duration[, queue]) |
Sets a timer to delay the execution of subsequent items in the queue. If a queue is specified, the delay is initiated on that queue item. |
jQuery |
dequeue([queue]) |
Executes the next function in the queue for the matched elements. If the optional queue argument is specified, that queue item is executed. |
jQuery |
fadeIn( |
Fades in (shows) each selected element by adjusting the element's opacity. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
fadeIn(options) |
Fades in (shows) each selected element by adjusting the element's opacity. See the “Animation Options” section later in this appendix. |
jQuery |
fadeIn( |
Fades in (shows) each selected element by adjusting the element's opacity. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
fadeOut( |
Fades out (hides) each selected element by adjusting the element's opacity. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
fadeOut(options) |
Fades out (hides) each selected element by adjusting the element's opacity. See the “Animation Options” section later in this appendix. |
jQuery |
fadeOut( |
Fades out (hides) each selected element by adjusting the element's opacity. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
fadeTo( |
Fades in each selected element by adjusting the element's opacity. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
fadeToggle( |
Toggles the display of each selected element by fading in or out by adjusting the element's opacity. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
fadeToggle(options) |
Toggles the display of each selected element by fading in or out by adjusting the element's opacity using the specified Animation Options. See the “Animation Options” section later in this appendix for more information. |
jQuery |
finish([queue]) |
Stop the currently running animation, remove all queued animations, and complete all animations for the matched elements. |
jQuery |
hide() |
Hides each selected element if the element is not already hidden. |
jQuery |
hide( |
Hides each selected element using an animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
hide(options) |
The hide animation is carried out with the specified object of options. See the “Animation Options” section later in this appendix. |
jQuery |
hide( |
Hides each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
$.fx.interval |
The rate in milliseconds that specifies how often animations fire. |
Number |
$.fx.off |
Globally disable all animations. |
Boolean |
queue([queue]) |
Shows the queue of functions to be executed on the matched elements. |
Array |
queue([queue], newQueue) |
Manipulates the queue of functions to be executed, once for each matched element. |
jQuery |
queue([queue], function()) |
Manipulates the queue of functions to be executed, once for each matched element. |
jQuery |
show() |
Displays each selected element if the element is hidden. |
jQuery |
show( |
Shows each selected element using an animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
show(options) |
The show animation is carried out with the specified object of options. See the “Animation Options” section later in this appendix. |
jQuery |
show( |
Shows each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
slideDown( |
Slides down (shows) each selected element using an animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
slideDown(options) |
The slideDown animation is carried out with the specified object of options. See the “Animation Options” section later in this appendix. |
jQuery |
slideDown( |
Slides down (shows) each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
slideToggle( |
Toggles each selected element between displayed and hidden by animating the element's height. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". An optional callback function can be executed when sliding has completed. This refers to the element being slid within the callback function. |
jQuery |
slideToggle(options) |
Toggles each selected element between displayed and hidden by animating each element's height. Animation is carried out with the specified object of options. See the “Animation Options” section later in this appendix. |
jQuery |
slideToggle( |
Toggles the sliding animation for each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
slideUp( |
Slides up (hides) each selected element using an animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
slideUp(options) |
The slideUp animation is carried out with the specified object of options. See the “Animation Options” section later in this appendix. |
jQuery |
slideUp( |
Slides up (hides) each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
stop( |
Stops all the currently running animations on all the specified elements. |
jQuery |
stop( |
Stops all the currently running animations on all the specified elements. |
jQuery |
toggle() |
Toggles each selected element between displayed and hidden. |
jQuery |
toggle( |
Toggles selected element using an animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
toggle(options) |
A toggle animation is carried out with the specified object of options. See the “Animation Options” section later in this appendix. |
jQuery |
toggle( |
Toggles each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast". |
jQuery |
toggle(showOrHide) |
Toggles each element using the boolean showOrHide argument to explicitly determine if an element should be shown or hidden. |
jQuery |
Animation Options |
||
Option |
Description |
Type |
duration |
Any one of "slow", "normal", "fast", or the time specified in milliseconds (ms). |
String, Number |
easing |
The name of the easing effect that you want to use (plugin required). There are two built-in values, "linear" and "swing". |
String |
queue |
Setting this to false makes the animation skip the queue and begin running immediately. |
Boolean |
specialEasing |
A map of one or more CSS properties that are already defined in the css (or properties) argument, which are each mapped to the easing that should be used to animate that particular property. |
Object |
step |
A function that is called for each animated property of each animated element. This function provides an opportunity to modify the Tween object. |
Function |
progress |
A function to be called after each step of the animation, only once per animated element, regardless of how many properties are animated. |
Function |
complete |
A function that is executed when the animation completes. |
Function |
start |
A function that is executed when animation starts. |
Function |
done |
A function that is executed when animation completes and its Promise object is resolved. |
Function |
fail |
A function that is executed when animation fails to complete and its Promise object is rejected. |
Function |
always |
A function that is executed when the animation completes or stops without completing, its Promise object is either resolved or rejected. |
Function |
Easings |
||
linear |
||
swing |
||
easeInQuad |
||
easeOutQuad |
||
easeInOutQuad |
||
easeInCubic |
||
easeOutCubic |
||
easeInOutCubic |
||
easeInQuart |
||
easeOutQuart |
||
easeInOutQuart |
||
easeInQuint |
||
easeOutQuint |
||
easeInOutQuint |
||
easeInExpo |
||
easeOutExpo |
||
easeInOutExpo |
||
easeInSine |
||
easeOutSine |
||
easeInOutSine |
||
easeInCirc |
||
easeOutCirc |
||
easeInOutCirc |
||
easeInElastic |
||
easeOutElastic |
||
easeInOutElastic |
||
easeInBack |
||
easeOutBack |
||
easeInOutBack |
||
easeInBounce |
||
easeOutBounce |
||
easeInOutBounce |
Effects |
|
Option |
Description |
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. |
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 |
Shrinks or grows an element by a percentage factor. |
size |
Resizes an element to a specified width and height. |
pulsate |
Pulsates the opacity of the element multiple times. |
Effects that can be used only as standalones: |
|
bounce |
Bounces the element vertically or horizontally n-times. |
highlight |
Highlights the background with a defined color. |
shake |
Shakes the element vertically or horizontally n-times. |
transfer |
Transfers the outline of an element to another. |