Animation and Easing Effects - Appendices - Web Development with jQuery (2015)

Web Development with jQuery (2015)

Part IV. Appendices

Appendix M. Animation and Easing Effects

Method

Description

Return Value

animate(
css
[, duration]
[, easing]
[, function()]
)

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.
The easing argument accepts two possible values using the default easing library, "linear" and "swing". However, you may download and enable a plethora of additional easing options, which are documented later in this appendix.
The optional callback function is executed once the animation has completed. this refers to the element animated.

jQuery

animate(
css,
options
)

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(
[duration]
[, function()]
)

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".
The optional callback function is executed when the animation has completed. this refers to the element animated.

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(
[duration]
[, easing]
[, function()
)

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".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

jQuery

fadeOut(
[duration]
[, function()]
)

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".
The optional callback function is executed when the animation has completed. this refers to the element animated.

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(
[duration]
[, easing]
[, function()
)

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".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

jQuery

fadeTo(
[duration]
[, easing]
[, function()
)

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".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed after the animation has completed. this refers to the element.

jQuery

fadeToggle(
[duration]
[, easing]
[, function()
)

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".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed after the animation has completed. this refers to the element.

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.
If the optional queue argument is specified, animations are stopped, removed, and completed only for the referenced queue.

jQuery

hide()

Hides each selected element if the element is not already hidden.

jQuery

hide(
[duration]
[, function()]
)

Hides each selected element using an animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast".
An optional callback function can be executed when hiding has completed. this refers to the element being hidden within the callback function.

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(
[duration]
[, easing]
[, function()]
)

Hides each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

jQuery

$.fx.interval

The rate in milliseconds that specifies how often animations fire.
Default value: 13 milliseconds

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.
The newQueue argument should contain an array of functions to replace the current queue contents.

jQuery

queue([queue], function())

Manipulates the queue of functions to be executed, once for each matched element.
The function argument refers to the new function to add to the queue, with a function to call that will dequeue the next item.

jQuery

show()

Displays each selected element if the element is hidden.

jQuery

show(
[duration]
[, function()]
)

Shows each selected element using an animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast".
An optional callback function can be executed when showing has completed. this refers to the element being shown within the callback function.

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(
[duration]
[, easing]
[, function()]
)

Shows each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

jQuery

slideDown(
[duration]
[, function()]
)

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".
An optional callback function can be executed when sliding has completed. this refers to the element being slid within the callback function.

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(
[duration]
[, easing]
[, function()]
)

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".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

jQuery

slideToggle(
[duration]
[, function()]
)

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(
[duration]
[, easing]
[, function()]
)

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".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

jQuery

slideUp(
[duration]
[, function()]
)

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".
An optional callback function can be executed when sliding has completed. this refers to the element being slid within the callback function.

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(
[duration]
[, easing]
[, function()]
)

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".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

jQuery

stop(
[clearQueue]
[, jumpToTheEnd]
)

Stops all the currently running animations on all the specified elements.
If the clearQueue argument is specified, it indicates whether to remove queued animation as well. This argument defaults to false.
The jumpToTheEnd argument is a boolean that indicates whether the current animation should be completed immediately. This argument defaults to false.

jQuery

stop(
[queue]
[, clearQueue]
[, jumpToTheEnd]
)

Stops all the currently running animations on all the specified elements.
The queue argument specifies which queue to stop animations within.
If the clearQueue argument is specified, it indicates whether to remove queued animation as well. This argument defaults to false.
The jumpToTheEnd argument is a boolean that indicates whether the current animation should be completed immediately. This argument defaults to false.

jQuery

toggle()

Toggles each selected element between displayed and hidden.

jQuery

toggle(
[duration]
[, function()]
)

Toggles selected element using an animation. 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

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(
[duration]
[, easing]
[, function()]
)

Toggles each selected element using a preset animation. The duration is either a time in milliseconds or a time preset: "slow", "normal", or "fast".
The easing can be either default easings "linear" or "swing", or any easing documented below, assuming you have installed the requisite additional easings as part of jQuery UI.
The optional callback function is executed when the animation has completed. this refers to the element.

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.
The function provides the following arguments: animation, progress, and remainingMilliseconds.

Function

complete

A function that is executed when the animation completes.

Function

start

A function that is executed when animation starts.
The function provides the following argument: animation.

Function

done

A function that is executed when animation completes and its Promise object is resolved.
The function provides the following arguments: animation and jumpedToTheEnd.

Function

fail

A function that is executed when animation fails to complete and its Promise object is rejected.
The function provides the following arguments: animation and jumpedToTheEnd.

Function

always

A function that is executed when the animation completes or stops without completing, its Promise object is either resolved or rejected.
The function provides the following arguments: animation and jumpedToTheEnd.

Function

Easings

linear

image

swing

image

easeInQuad

image

easeOutQuad

image

easeInOutQuad

image

easeInCubic

image

easeOutCubic

image

easeInOutCubic

image

easeInQuart

image

easeOutQuart

image

easeInOutQuart

image

easeInQuint

image

easeOutQuint

image

easeInOutQuint

image

easeInExpo

image

easeOutExpo

image

easeInOutExpo

image

easeInSine

image

easeOutSine

image

easeInOutSine

image

easeInCirc

image

easeOutCirc

image

easeInOutCirc

image

easeInElastic

image

easeOutElastic

image

easeInOutElastic

image

easeInBack

image

easeOutBack

image

easeInOutBack

image

easeInBounce

image

easeOutBounce

image

easeInOutBounce

image

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.