jQuery Effects
jQuery effects change the visibility, opacity, position, or numeric CSS properties of elements over time. The full jQuery build includes the core effects methods. jQuery UI adds a larger set of named effects and color animation.
Core jQuery Effects Top ↑
Start with these methods before moving to the larger jQuery UI effect collection.
show() and hide()
Display or hide elements, with optional duration and callbacks.
toggle()
Switch between shown and hidden states with one method.
fadeIn() and fadeOut()
Reveal or hide elements by animating opacity.
fadeToggle()
Alternate between fading an element in and out.
fadeTo()
Animate an element to a specific opacity.
slideUp() and slideDown()
Hide or reveal content with a vertical sliding transition.
slideToggle()
Alternate between slide-up and slide-down states.
animate()
Animate numeric CSS properties and use callbacks for sequences.
Color animation with jQuery UI
Animate supported color properties through jQuery UI.
Duration and Completion Callbacks Top ↑
Most core effect methods accept a duration such as "slow", "fast", or a number of milliseconds. When you need code to run after an effect finishes, pass a completion callback.
$("#notice").fadeOut(400, function () {
console.log("Fade complete");
});jQuery UI Effects Top ↑
jQuery UI adds named effects such as bounce, blind, shake, highlight, and transfer. Load jQuery first and then jQuery UI. Current examples in this section use the jQuery UI 1.14.x line.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>Demo: compare the jQuery UI effects →
Blind
Reveal or hide content with a blind-style effect.
Bounce
Move an element with repeated bounce motion.
Clip
Reveal or hide by clipping from an edge or center.
Drop
Combine movement and opacity in a directional drop.
Explode
Split the element visually into pieces while hiding or showing it.
Fold
Fold an element along horizontal and vertical dimensions.
Fade
Use the jQuery UI fade effect with effect options.
Highlight
Temporarily emphasize an element with a background-color transition.
Puff
Scale and fade an element together.
Pulsate
Repeatedly fade an element in and out.
Scale
Resize an element by a percentage.
Shake
Move an element back and forth.
Size
Animate an element from its current dimensions to target dimensions.
Slide
Show or hide an element by sliding it in a chosen direction.
Transfer
Animate an outline from one element to another.
Which Effect Should You Use? Top ↑
- Use
show(),hide(), ortoggle()when visibility is the main goal. - Use the fade methods when opacity should change gradually.
- Use the slide methods for expanding/collapsing vertical content.
- Use
animate()for numeric CSS-property animation. - Use jQuery UI when you specifically need its named effects or color animation.
← jQuery tutorial home · Start with show() and hide() →
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
