jQuery Effects & Animations
jQuery provides simple show/hide helpers and a powerful animate() API. This page covers visual effects, queues & control (stop/finish), durations & easing, delay() & promises, scrolling, and how to mix CSS transitions with jQuery.
Quick Reference
| API | Description | Example |
|---|---|---|
.show() / .hide() / .toggle() |
Instant visibility change. With duration (e.g., 'slow') uses a simple animation. |
$('#box').toggle('slow') |
Fade: fadeIn, fadeOut, fadeToggle, fadeTo |
Animate opacity (and display). | $('#box').fadeTo(400, 0.3) |
Slide: slideDown, slideUp, slideToggle |
Reveal/collapse height. | $('#panel').slideToggle(300) |
animate(props, [dur], [easing], [complete]) |
Animate numeric CSS properties (e.g., left, top, opacity). |
$('#box').animate({ left:'+=120', opacity:.3 }, 400) |
| Queues & control | Animations chain into a queue. stop(clear,jump) cancels; finish() jumps to end. |
$('#box').stop(true,true), $('#box').finish() |
| Durations & easing | Durations: number ms or 'fast'/'slow'. Easing: 'swing' (default) or 'linear'. |
$('#a').animate({left:200}, 'slow', 'swing') |
delay() & .promise().done() |
Pause the queue; run code after animations complete. | $('#box').fadeOut().delay(300).fadeIn().promise().done(fn) |
| Scroll animations | Animate scrollTop on html, body. |
$('html,body').animate({scrollTop:...}, 600) |
| Mix with CSS classes | Use CSS transitions for transforms; combine with fades/slides. | $('#box').toggleClass('active').fadeToggle(200) |
Tip: Only numeric CSS properties can be animated via
animate(). For transforms like scale/rotate, prefer CSS transitions (class toggles) or a dedicated animation library.4) animate() basics & chaining
$('#box').animate({ left: '+=120', opacity: 0.3 }, 400)
.animate({ top: '+=60', opacity: 1 }, 300);
5) Queues, stop(), finish()
$('#box').stop(true, true); // clear queue & jump to end
$('#box').finish(); // jump current + queued to end
6) Durations & Easing
$('#a').animate({ left: 200 }, 'slow', 'swing');
$('#b').animate({ left: 200 }, 200, 'linear');
7) delay() & completion
$('#box').fadeOut(200).delay(300).fadeIn(200, function(){ /* complete */ })
.promise().done(function(){ /* all done */ });
8) Scroll animations (scrollTop)
$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 600);
9) Animate multiple elements (stagger)
$('.dot').each(function(i, el){
$(el).delay(i*120).animate({ left: "+=120" }, 300).animate({ left: 0 }, 300);
});
10) Mix CSS transitions with jQuery
Use CSS for transforms (GPU-accelerated) and jQuery for visibility or opacity.
$('#box').toggleClass('active').fadeToggle(200);
Performance: Avoid animating layout-heavy properties like
width/height on large elements. Prefer transforms/opacity with CSS transitions where possible. Keep simultaneous animations low and cancel with .stop() when changing direction.