Effect methods in jQuery ​

注：本文内容摘录自《Learning jQuery (4th Edition)》。

These effect methods may be used to perform animations on DOM elements.

Predefined effects ​

Predefined effects

Effect method

Description

.show()

Displays the matched elements.

.hide()

Hides the matched elements.

.show(speed, [callback])

Dispalys the matched elements by animating height, width, and opacity.

.hide(speed, [callback])

Hides the matched elements by animating height, width, an opacity.

.toggle([speed], [callback])

Displays or hides the matched elements.

.slideDown([speed],[callback])

Displays the matched elements with a sliding motion.

.slideUp([speed], [callback])

Hides the matched elements with a sliding motion.

.fadeIn([speed], [callback])

Displays the matched elements by fading them to opaque.

.fadeOut([speed], [callback])

Hides the matched elements by fading them to transparent.

.fadeToogle([speed], [callback])

Displays or hides the matched elements with a fading animation.

.fadeTo(speed, opacity, [callback])

Adjusts the opacity of the matched elements.

Custom animations ​

Custom animations

Effect method

Description

.animate(properties, [speed], [easing], [callback])

Performs a custom animation of the specified CSS properties.

.animate(properties, options)

A lower-level interface to .animate(), allowing control over the animation queue.

Queue manipulation ​

Queue manipulation

Effect method

Description

.queue([queueName])

Retrieves the queue of functions on the first matched element.

.queue([queueName], callback)

Adds callback to the end of the queue.

.queue([queueName], newQueue)

Replaces the queue with a new one.

.dequeue([queueName])

Executes the next function on the queue.

.clearQueue([queueName])

Empties the queue of all pending functions.

.stop([clearQueue], [jumpToEnd])

Stops the curently running animation, then starts queued animations, if any.

.finish([queueName])

Stops the currently running animation and immediately advances all queued animations to their target values.

.delay(duration, [queueName])

Waits duration milliseconds before executing the next item in the queue.

.promise([queueName], [target])

Returns a promise object to be resolved once all queued actions on the collection have finished.