jQuery Effects Methods
What You’ll Learn
jQuery Effects methods animate elements over time. .animate() is the core API for custom motion — tween numeric CSS properties with duration, easing, callbacks, and queue control. This hub links to 17 effects tutorials with try-it labs and FAQs.
.animate()
Custom properties
Duration
ms, fast, slow
Easing
swing, linear
queue:false
Parallel motion
step
Per-frame hook
fx queue
Serial chaining
Introduction
jQuery ships built-in animation helpers — .show('slow'), .fadeIn(), .slideToggle() — that cover common UI transitions. When you need precise control, .animate() tweens any numeric CSS property toward a target value over milliseconds.
Every effect method enqueues work on the default fx queue unless you opt out with queue: false. That is why $('#box').animate({left:100}).fadeIn() runs left first, then opacity — and why queue utilities like .stop(), .clearQueue(), and .dequeue() matter for polished UX.
Effects Method Index
17 tutorialsAnimate numeric CSS properties and pause between queued effect steps.
| Method | Description | Tutorial |
|---|---|---|
.animate() | Perform custom animations on numeric CSS properties — duration, easing, complete callback, queue:false, step, and specialEasing options. | Open |
.delay() | Pause the fx or custom effects queue for a number of milliseconds before the next queued step runs — official two-div demo; compare with setTimeout. | Open |
Reveal and hide elements with smooth opacity transitions.
| Method | Description | Tutorial |
|---|---|---|
.fadeIn() | Display hidden matched elements by fading opacity to opaque — duration, easing, complete callback, and options overload since 1.0. | Open |
.fadeOut() | Hide matched elements by fading to transparent then display:none — duration, easing, complete callback; official span-remove and linear vs swing demos. | Open |
.fadeTo() | Animate opacity to a specific value between 0 and 1 — duration is required; does not unhide or hide; official dim, random, and quiz demos. | Open |
.fadeToggle() | Toggle matched elements with fadeIn or fadeOut based on visibility — duration, easing, complete callback since 1.4.4; official two-button demo. | Open |
Reveal and hide elements with smooth vertical slide motion.
| Method | Description | Tutorial |
|---|---|---|
.slideDown() | Display hidden matched elements with a sliding motion — animates height so content below moves down; official div toggle and input reveal demos since 1.0. | Open |
.slideUp() | Hide matched elements with a sliding motion — animates height to zero then display:none; official div toggle and parent paragraph callback demos since 1.0. | Open |
.slideToggle() | Display or hide matched elements with a sliding motion — auto-picks slideDown or slideUp based on visibility; saves display property since 1.0; official paragraph and div counter demos. | Open |
Stop, finish, and configure global jQuery animation timing.
| Method | Description | Tutorial |
|---|---|---|
.stop() | Stop the currently-running animation — clearQueue and jumpToEnd flags since 1.2; optional fx queue name since 1.7; official Go/STOP and slideToggle guard demos. | Open |
.finish() | Stop the current animation, remove all queued steps, and jump every queued effect to its end CSS values — official path demo; compare with stop(true,true) since 1.9. | Open |
jQuery.fx.interval | Global milliseconds between animation ticks — default 13; deprecated in 3.0, removed in 4.0; no effect when requestAnimationFrame is supported. | Open |
jQuery.fx.off | Globally disable all jQuery animations — when true, effect methods jump elements to their final state instantly; official Toggle fx demo since 1.3. | Open |
jQuery.speed() | Normalize duration, easing, and complete into a PlainObject for custom animation plugins — defaults 400 ms and swing; three overloads since 1.0/1.1. | Open |
Manage jQuery animation and custom function queues on selected elements.
| Method | Description | Tutorial |
|---|---|---|
.queue() | Show, add, or replace function queues on elements — default fx effects queue; official read length and addClass demos; compare with dequeue and clearQueue. | Open |
.dequeue() | Execute the next queued function — official animate + toggleClass demo; call inside .queue() callbacks or use next(); compare with clearQueue. | Open |
.clearQueue() | Remove pending fx or custom queue functions not yet run — official Start/Stop animation demo; pair with .stop(); compare with .stop(true). | Open |
❓ Frequently Asked Questions
Start with .animate()
Open the full tutorial with syntax, five official demos, and interactive try-it labs.
About the author
6 people found this page helpful