This tutorial is about the jQuery effects. There are several techniques that jQuery library provides, just like for adding animation to a web page.
It contains simple, standard animations that are mostly used and has an ability to create awesome custom effects.
Below are the following commonly used effects:
hide()
Example: All h2 elements disappears when the user clicks on any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$(this).hide();
});
});
show()
Example: All hidden div elements reappears when the user clicks any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$("div").show();
});
});
toggle()
Example: All hidden div elements reappears or disappears if it is visible when the user clicks on any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$("div").toggle();
});
});
jQuery Fading Methods
fadeIn()
Syntax:
$(selector).fadeIn(speed,callback)
You can set the speed from slow to fast or vice versa and time will be in milliseconds(1000ms = 1s).
Example: All div elements fades slowly when the user clicks on any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$("div").fadeIn(1000,0);
});
})$(document).ready(function(){
$("h2").click(function(){
$("div").fadeIn("slow");
});
})fadeOut()
fadeToggle()
fadeOut() method, fades out a html element while the fadeToggle() method, toggles the visiblity of a html element.
Example: All div elements fades out in just 3 seconds whenever the user clicks on any of the h2 element.
$(document).ready(function(){
$("h2").click(function(){
$("div").fadeOut(3000);
});
});
Example: All the div elements fades out if its visible or it will fade in if it is hidden, whenever the user clicks on any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$("div").fadeToggle("fast");
});
});fadeTo()
This method has the ability that allows fading to a gevin opacity (value between 0 and 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
Example: All the div elements fades to the provided opacity when the user clicks on any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$("div").fadeTo("slow",0.5);
});
});
slideDown()
This method has the ability to slide down an HTML elements.
Example: All the div elements slide down slowly when the user clicks on any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$("div").slideDown("slow");
});
});slideUp()
slideToggle()
slideUp() method, slides up an html element while the slideToggle() method, slides down when the HTML element slides up. But when the HTML element slides down, the slideToggle() will slide up respectively.
Example: All div elements slide up in just 3 seconds whenever the user clicks on any of the h2 element.
$(document).ready(function(){
$("h2").click(function(){
$("div").slideUp(3000);
});
});Example: All the div elements slide up if it slides down or its slides down if it slides up whenever the user clicks on any of the h2 elements.
$(document).ready(function(){
$("h2").click(function(){
$("div").slideToggle("fast");
});
});
jQuery Sliding Methods
Sliding effects let elements roll up or down smoothly. They are perfect for accordion menus, FAQ toggles, and expandable content sections. The three main methods:
// Slide down to reveal hidden element
$("#menu").slideDown(500);
// Slide up to hide
$("#menu").slideUp(500);
// Toggle between shown and hidden
$("#menu").slideToggle(500);
// With callback when animation completes
$("#menu").slideDown(500, function() {
console.log("Menu is now visible");
});The number argument is the duration in milliseconds. Common values: 200 (fast), 400 (default), 600 (slow). You can also use the strings “slow” or “fast” instead of numbers.
jQuery animate() — Custom Animations
When the built-in methods do not cover what you want, animate() lets you change any CSS property smoothly:
$("#box").animate({
width: "300px",
height: "200px",
opacity: 0.5,
marginLeft: "+=50px"
}, 800);The += and -= operators are useful for relative changes. marginLeft: "+=50px" moves the element 50 pixels to the right of wherever it currently is, regardless of its starting position.
Important limitation: animate() only works with numeric CSS properties (width, height, opacity, margin, etc.). It cannot animate background-color or color without the jQuery UI library, since those are non-numeric values.
Chaining Multiple Effects
jQuery’s most powerful feature is method chaining. You can apply several effects to the same element in sequence:
$("#alert")
.fadeIn(400)
.delay(2000)
.slideUp(400)
.queue(function() {
$(this).remove();
$(this).dequeue();
});The above shows an alert with a fade-in, waits 2 seconds, slides it up, then removes the element from the DOM. The whole interaction happens in 6 lines of code.
When to Use Vanilla JavaScript Instead
jQuery effects were essential a decade ago. In 2026, modern CSS and vanilla JavaScript can replicate most of them without any library. Here is when each approach makes sense:
| Use jQuery When | Use Vanilla CSS/JS When |
|---|---|
| Your project already includes jQuery | Starting a new project from scratch |
| You need wide browser support (IE 11) | Only supporting modern browsers |
| Complex chained animations | Simple show/hide transitions |
| Working with old WordPress themes | Want to minimize bundle size |
Vanilla JS equivalent of fadeIn()
// Vanilla JS fade-in
const el = document.getElementById("box");
el.style.opacity = 0;
el.style.display = "block";
el.style.transition = "opacity 0.4s";
requestAnimationFrame(() => { el.style.opacity = 1; });For BSIT students starting in 2026, learning vanilla JS first is the right call. jQuery still works fine but most new tutorials and frameworks (React, Vue, Angular) assume vanilla DOM knowledge.
Common jQuery Effects Mistakes
- Forgetting to wait for the document to be ready. Wrap your code in
$(function() { ... })or it may run before the elements you target exist in the DOM. - Using effects on elements that do not exist. jQuery does not throw an error if the selector matches nothing, it just silently does nothing. Add a length check:
if ($("#box").length) { ... }. - Chaining effects on the wrong element.
$("#a").fadeIn().slideUp()applies BOTH effects to #a in sequence, which is rarely what you want. Use.end()to go back up the chain. - Animating non-numeric CSS without jQuery UI.
animate({backgroundColor: "red"})silently fails. Either include jQuery UI or use vanilla CSS transitions for color changes. - Stacking animations during user spam-clicks. If the user clicks a button 5 times quickly, you get 5 queued animations. Use
.stop(true, true)before chaining to clear the queue.
Frequently Asked Questions
What are jQuery effects?
jQuery effects are pre-built methods that animate DOM elements with one line of code. The most common are fade (fadeIn, fadeOut, fadeToggle), slide (slideDown, slideUp, slideToggle), and the generic animate() method for custom property animations. Each method accepts an optional duration and callback function.
Is jQuery still relevant for effects in 2026?
For new projects, native CSS transitions and vanilla JavaScript replace 90% of what jQuery effects used to do. jQuery is still useful when your project already includes it, when you need broad browser support including IE 11, or when chaining complex animations. For a from-scratch BSIT capstone in 2026, vanilla CSS and JS is the better learning path.
Why does my jQuery effect not work?
Three common causes. First, jQuery is not loaded yet, so the $ function does not exist. Second, the selector matches no elements and silently does nothing. Third, your code runs before the DOM is ready. Wrap your code in $(function() { ... }) and verify with console.log($("#yourElement").length) to confirm the selector finds something.
How do I make a fadeIn effect run only once?
Use the callback parameter: $("#box").fadeIn(400, function() { $(this).off("click"); });. This fades in the element, then removes the click handler so subsequent clicks do nothing. Alternatively, set a flag variable and check it before triggering the effect.
Can jQuery animate colors?
Not by default. The core animate() method only handles numeric CSS properties (width, height, opacity, margin). To animate color or background-color, include the jQuery UI library which adds color animation support. The modern alternative is to use CSS transitions: set transition: background-color 0.3s in CSS, then change the color with jQuery’s .css() method.