jQuery Effects: Making Your Page Interactive with Animation
jQuery provides easy-to-use methods to show, hide, fade, slide, and animate elements on your page smoothly.
Common jQuery Effects Methods
| Method | What it Does | Basic Usage Example |
|---|---|---|
.hide() |
Hides the selected element | $('#box').hide(); |
.show() |
Shows the selected element | $('#box').show(); |
.toggle() |
Toggles visibility (show/hide) | $('#box').toggle(); |
.fadeIn() |
Fades the element in (from transparent) | $('#box').fadeIn(1000); |
.fadeOut() |
Fades the element out (to transparent) | $('#box').fadeOut(1000); |
.fadeToggle() |
Toggles fade (fadeIn or fadeOut) | $('#box').fadeToggle(); |
.slideDown() |
Slides element down to show it | $('#box').slideDown(500); |
.slideUp() |
Slides element up to hide it | $('#box').slideUp(500); |
.slideToggle() |
Toggles slide (slideDown or slideUp) | $('#box').slideToggle(); |
.animate() |
Custom animation of CSS properties | $('#box').animate({width: '300px'}, 1000); |
Simple Example: Show/Hide with Fade
Example: Slide Toggle
Using .animate() for Custom Effects
You can animate numeric CSS properties like width, height, opacity, margin, etc.
Chaining Effects
You can chain multiple effects one after another:
Speed Parameters
-
.fadeIn(1000)— 1000 milliseconds (1 second). -
You can also use
'fast'or'slow'instead of a number.
Summary
jQuery effects add life to your pages with minimal code — great for toggling menus, highlighting content, or creating smooth UI transitions.
