jQuery Effect Methods
The following table lists all the jQuery methods for creating animation effects.
Method Description
animate() Runs a custom animation on the selected elements
clearQueue() Removes all remaining queued functions from the selected elements
delay() Sets a delay for all queued functions on the selected elements
dequeue() Removes the next function from the queue, and then executes the function
fadeIn() Fades in the selected elements
fadeOut() Fades out the selected elements
fadeTo() Fades in/out the selected elements to a given opacity
fadeToggle() Toggles between the fadeIn() and fadeOut() methods
finish() Stops, removes and completes all queued animations for the selected elements
hide() Hides the selected elements
queue() Shows the queued functions on the selected elements
show() Shows the selected elements
slideDown() Slides-down (shows) the selected elements
slideToggle() Toggles between the slideUp() and slideDown() methods
slideUp() Slides-up (hides) the selected elements
stop() Stops the currently running animation for the selected elements
toggle() Toggles between the hide() and show() methods
jQuery animate() Method
The animate() method performs a custom animation of a set of CSS properties.
This method changes an element from one state to another with CSS styles. The CSS property value
is changed gradually, to create an animated effect.
Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like
"background-color:red"), except for the strings "show", "hide" and "toggle". These values allow
hiding and showing the animated element.
Tip: Use "+=" or "-=" for relative animations.
Example
"Animate" an element, by changing its height:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height: "300px"});
});
$("#btn2").click(function(){
$("#box").animate({height: "100px"});
});
});
</script>
</head>
<body>
<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>
</html>
jQuery clearQueue() Method
The clearQueue() method removes all items from the queue that have not yet been run. Note that
when a function has started to run, it runs until it is completed.
Example
Stop the remaining functions in the queue:
$("button").click(function(){
$("div").clearQueue();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 300}, 1500);
$("div").animate({width: 300}, 1500);
$("div").animate({height: 100}, 1500);
$("div").animate({width: 100}, 1500);
});
$("#stop").click(function(){
$("div").clearQueue();
});
});
</script>
</head>
<body>
<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
<br><br>
<div style="background:red;height:100px;width:100px;"></div>
</body>
</html>
jQuery delay() Method
The delay() method sets a timer to delay the execution of the next item in the queue.
Example
Delay different <div> elements:
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
$("#div4").delay(2000).fadeIn();
$("#div5").delay(4000).fadeIn();
});
});
</script>
</head>
<body>
<p>This example sets different speed values for the delay() method.</p>
<button>Click to fade in boxes with a delay</button>
<br><br>
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></
div><br>
</body>
</html>
jQuery dequeue() Method
The dequeue() method removes the next function from the queue, and then executes the function.
A queue is one or more function(s) waiting to run.
The dequeue() method is used together with the queue() method.
An element can have several queues. Most often it has only one, the "fx" queue, which is the default
jQuery queue.
Note: You should ensure that the dequeue() method is called after adding a function with queue(), to
allow the process to continue.
Example
Remove the next function from the queue, and then execute the function:
$("div").queue(function(){
$("div").css("background-color", "red");
$("div").dequeue();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
var div = $("div");
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.queue(function(){
div.css("background-color", "red");
div.dequeue();
});
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
});
});
</script>
</head>
<body>
<p>The queue() method allows you to create a queue of functions to be executed on selected
elements.</p>
<p>The dequeue() method executes them in order. </p>
<p><button id="start">Start Animation</button></p>
<div style="background:blue;height:100px;width:100px;">
</div>
</body>
</html>
jQuery fadeIn() Method
The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible
(fading effect).
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: This method is often used together with the fadeOut() method.
Example
Fade in all <p> elements:
$("button").click(function(){
$("p").fadeIn();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut();
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
jQuery Effect fadeOut() Method
The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden
(fading effect).
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: This method is often used together with the fadeIn() method.
Example
Fade out all <p> elements:
$("button").click(function(){
$("p").fadeOut();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut();
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
jQuery Effect fadeTo() Method
The fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity
(fading effect).
Example
Gradually change the opacity of all <p> elements:
$("button").click(function(){
$("p").fadeTo(1000, 0.4);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").fadeTo(1000, 0.4);
});
});
</script>
</head>
<body>
<button>Gradually change the opacity of the p element</button>
<p>This is a paragraph.</p>
</body>
</html>
jQuery fadeToggle() Method
The fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out.
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page)
Example
Toggle between fading in and fading out different boxes:
$("button").click(function(){
$("#div1").fadeToggle();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
jQuery finish() Method
The finish() method stops the currently-running animations, removes all queued animations, and
completes all animations for the selected elements.
This method is similar to the .stop(true,true) method, except that finish() also causes the CSS
property of all queued animations to stop.
Example
Finish the currently running animation:
$("#complete").click(function(){
$("div").finish();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 300}, 3000);
$("div").animate({width: 300}, 3000);
});
$("#complete").click(function(){
$("div").finish();
});
});
</script>
</head>
<body>
<p>
<button id="start">Start Animation</button>
<button id="complete">Finish Current Animation</button>
</p>
<div style="background:#98bf21;height:100px;width:100px"></div>
</body>
</html>
jQuery hide() Method
The hide() method hides the selected elements.
Tip: This is similar to the CSS property display:none.
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: To show hidden elements, look at the show() method.
Example
Hide all <p> elements:
$("button").click(function(){
$("p").hide();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
jQuery queue() Method
The queue() method shows the queue of functions to be executed on the selected elements.
A queue is one or more function(s) waiting to run.
The queue() method can be used together with the dequeue() method.
An element can have several queues. Most often it has only one, the "fx" queue, which is the default
jQuery queue.
Example
Display the length of a queue in a <span> element:
$("span").text(div.queue().length);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
$("span").text(div.queue().length);
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>The queue length is: <span></span></p>
<div style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-
color:red;"></div>
</body>
</html>
jQuery Effect show() Method
The show() method shows the hidden, selected elements.
Note: show() works on elements hidden with jQuery methods and display:none in CSS (but not
visibility:hidden).
Tip: To hide elements, look at the hide() method.
Example
Show all hidden <p> elements:
$("button").click(function(){
$("p").show();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
jQuery slideDown() Method
The slideDown() method slides-down (shows) the selected elements.
Note: slideDown() works on elements hidden with jQuery methods and display:none in CSS (but
not visibility:hidden).
Tip: To slide-up (hide) elements, look at the slideUp() method.
Example
Slide-down (show) all hidden <p> elements:
$("button").click(function(){
$("p").slideDown();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>
</body>
</html>
jQuery slideToggle() Method
The slideToggle() method toggles between slideUp() and slideDown() for the selected elements.
This method checks the selected elements for visibility. slideDown() is run if an element is hidden.
slideUp() is run if an element is visible - This creates a toggle effect.
Example
Toggle between slideUp() and slideDown() for all <p> elements:
$("button").click(function(){
$("p").slideToggle();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle slideUp() and slideDown()</button>
</body>
</html>
jQuery slideUp() Method
The slideUp() method slides-up (hides) the selected elements.
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: To slide-down (show) elements, look at the slideDown() method.
Example
Slide-up (hide) all <p> elements:
$("button").click(function(){
$("p").slideUp();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>
</body>
</html>
jQuery stop() Method
The stop() method stops the currently running animation for the selected elements.
Example
Stop the currently running animation:
$("#stop").click(function(){
$("div").stop();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 300}, 3000);
$("div").animate({width: 300}, 3000);
});
$("#stop").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<p>
<button id="start">Start Animation</button>
<button id="stop">Stop Current Animation</button>
</p>
<div style="background:#98bf21;height:100px;width:100px"></div>
</body>
</html>
jQuery toggle() Method
The toggle() method toggles between hide() and show() for the selected elements.
This method checks the selected elements for visibility. show() is run if an element is hidden. hide()
is run if an element is visible - This creates a toggle effect.
Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
Tip: This method can also be used to toggle between custom functions.
Example
Toggle between hide and show for all <p> elements:
$("button").click(function(){
$("p").toggle();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
