What are the methods used to provide effects in jQuery ?
Last Updated :
10 Sep, 2021
Effects in jQuery are generally used for adding animation to a web page. The jQuery library has several methods which we can use for making custom animation for a web page. In this article, we will see every method that is available in jQuery for making animation. We will discuss all the methods along with the jQuery code snippet and output.
1. animate() Method: This method is used for making custom animations with some selected CSS properties. For example height, width, etc can be animated with this method.
Example: In this example, we are animating the size of the sphere.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Animate Method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
#shape {
height: 100px;
width: 100px;
background-color: yellow;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="main">
<div id="shape">
</div>
</div>
<script>
$(document).ready(function () {
// On taking the mouse to the shape,
// will increase the size of shape.
$("#shape").mouseover(function () {
$(this).animate({
height: "200px",
width: "200px"
});
});
// On taking out the mouse from the shape,
// will decrease the size of shape.
$("#shape").mouseout(function () {
$(this).animate({
height: "100px",
width: "100px"
});
});
});
</script>
</body>
</html>
|
Output:
2. clearQueue() Method: This method will be used to remove all the items from the queue that are still waiting to run. For example, we are animating five elements and in between we used .clearQueue then it will stop the animation from that point. Here is one more thing to clear that we are not stopping any particular animation once an animation will start it will complete its standalone animation.
Example: In this example, we are Animating a shape in multiple stages and stopping the animation using the .clearQueue() method.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
#box {
height: 100px;
width: 100px;
background-color: rgb(229, 255, 0);
position: absolute;
top: 300px;
left: 0px;
display: none;
}
.btns {
margin: 10px;
}
#start,
#stop {
border-radius: 3px;
color: rgb(0, 0, 0);
font-family: Georgia, "Times New Roman", Times, serif;
height: 40px;
width: 100px;
outline: none;
border: 1px solid black;
}
#box.bluebox {
background-color: blue;
}
#box.greenbox {
background-color: green;
}
#box.redbox {
background-color: red;
}
#box.yellowbox {
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">
<div id="box"></div>
<div class="btns">
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
</div>
<script>
var box = $("#box");
// Box will be visible
$("#start").click(function () {
box.show(3000);
// New function added to the
// queue for changing the box
// color to the blue
box.queue(function () {
var box = $(this);
box.addClass("bluebox");
box.dequeue();
});
box.animate({ left: 400 }, 2000);
// New function added to the
// queue for changing the box
// color to the green
box.queue(function () {
var box = $(this);
box.addClass("greenbox");
box.dequeue();
});
box.animate({ top: 200 }, 2000);
// New function added to the
// queue for changing the box
// color to the red
box.queue(function () {
var box = $(this);
box.addClass("redbox");
box.dequeue();
});
box.animate({ left: 0 }, 2000);
// New function added to the
// queue for changing the box
// color to the yellow
box.queue(function () {
var box = $(this);
box.addClass("yellowbox");
box.dequeue();
});
box.animate({ top: 300 }, 2000);
// Here animation will be done
box.hide("slow");
});
// This function will stop the animation
// as well as clear the queue of functions
$("#stop").click(function () {
box.clearQueue();
box.stop();
});
</script>
</body>
</html>
|
Output:
3. delay() Method: This method will be used for making a delay between the animation of several items that are present in the queue. With the help of this method, we will set a timer so that each animation will start with that particular time gap.
Example: In this example, we are delaying the animation per second using the delay method.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(36, 36, 36);
height: 100vh;
}
#c1,
#c2,
#c3,
#c4,
#c5 {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
}
#c5 {
background-color: red;
}
#c4 {
background-color: rgb(0, 255, 0);
}
#c3 {
background-color: rgb(255, 251, 0);
}
#c2 {
background-color: rgb(0, 247, 255);
}
#c1 {
background-color: rgb(139, 1, 132);
}
</style>
</head>
<body>
<div class="main">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
</div>
<script>
// As the page reloads animation will be start.
$("#c5").delay(1000).animate({
height: "0px", width: "0px" });
$("#c4").delay(2000).animate({
height: "0px", width: "0px" });
$("#c3").delay(3000).animate({
height: "0px", width: "0px" });
$("#c2").delay(4000).animate({
height: "0px", width: "0px" });
$("#c1").delay(5000).animate({
height: "0px", width: "0px" });
</script>
</body>
</html>
|
Output:
4. dequeue() Method: The .dequeue() method is used to excluding any certain function from the queue and then executes the rest of the function. For example, we have a queue with five-element and we want to remove the 3rd element from the queue then we will call the .dequeue() method, dequeue method will be called with the queue method.
Example: In this example, the size of the shape will be animated and we will use a function to change the color of the shape once during the entire animation process and then with the help of the dequeue method we will exclude that function so that rest of the functions waiting in the queue will run.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Dequeue method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(36, 36, 36);
height: 100vh;
}
#txt {
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="start">Start</button>
</div>
<script>
$("#start").click(function () {
var t = $("#txt");
t.animate({ fontSize: "2rem" }, 1500);
t.animate({ fontSize: "3rem" }, 1500);
t.queue(function () {
var newColor = $(this);
newColor.css("color", "#29a329");
newColor.dequeue();
});
t.animate({ fontSize: "4rem" }, 1500);
t.animate({ fontSize: "5rem" }, 1500);
});
</script>
</body>
</html>
|
Output:
5. fadeIn() Method: FadeIn means making any certain element visible. This method simply animates the element based on opacity from 0% to 100%.
Example: In this example, text will fade in at the click of a button.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Fade in method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="fadein">Fade In</button>
</div>
<script>
// Initially text is invisible.
$("#fadein").click(function () {
$("#txt").fadeIn(2000);
});
</script>
</body>
</html>
|
Output:
6. fadeOut() Method: This method’s behavior is just opposite to the fadeIn, this method will animate the element from opaque to transparent.
Example: In this example, text will fade out on a button click.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Fade out method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="fadeout">Fade Out</button>
</div>
<script>
$("#fadeout").click(function () {
$("#txt").fadeOut(2000);
});
</script>
</body>
</html>
|
Output:
7. fadeTo() Method: We can animate any certain element to a particular opacity value with this method. For example, if we want to make any hidden element visible but only 50% visible, then we have to use this method.
Example: In this example, we are fading out a text to 50% of the opacity.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>FadeTo method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">
Half the opacity of text.
</button>
</div>
<script>
// Text will be half visible and this
// animation will take 2 seconds
$("#btn").click(function () {
$("#txt").fadeTo(2000, 0.5);
});
</script>
</body>
</html>
|
Output:
8. fadeToggle() Method: We can use this method to make a toggle animation with fadeIn and fadeOut.
Example: In this example, Toggle between fadeIn and fadeOut on a button click.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>FadeToggle method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Hide/Show</button>
</div>
<script>
$("#btn").click(function () {
$("#txt").fadeToggle(3000);
});
</script>
</body>
</html>
|
Output:
9. hide() Method: We can hide the selected element with the help of this method.
Example: In this example, we are hiding a text on a button click.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Hide method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Hide</button>
</div>
<script>
// Text will be hidden on button click
$("#btn").click(function () {
$("#txt").hide("fast");
});
</script>
</body>
</html>
|
Output:
10. queue() Method: This method is used to show or manipulate the queue of functions that is being executed on the particular elements. A single or more function could be in a queue that is waiting to run. An element can have multiple queues.
Example: In this example, we can see how many methods are there in the queue.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Queue method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
p {
color: #fff;
}
#box {
height: 10px;
width: 10px;
background-color: yellow;
border-radius: 100%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="main">
<p>Total functions in the queue: <i></i></p>
<div id="box"></div>
<button id="start">Start</button>
</div>
<script>
$(document).ready(function () {
$("#start").click(function () {
var div = $("#box");
div.animate({ height: 100, width: 100 });
div.animate({ height: 500, width: 500 });
div.animate({ height: 550, width: 550 });
div.animate({ height: 0, width: 0 });
$("i").text(div.queue().length);
});
});
</script>
</body>
</html>
|
Output:
11. show() Method: This method will be used to display the selected element from the hidden state.
Example: In this example, we are showing text on a button click.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Show method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: green;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Show</button>
</div>
<script>
// Initially text is hidden.
$("#btn").click(function () {
$("#txt").show("slow");
});
</script>
</body>
</html>
|
Output:
12. slideDown() Method: An element will be shown with the sliding-down animation.
Example: Text will rise with a slide-down animation on a button click.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>SlideDown method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Slide Down</button>
</div>
<script>
// Initially text is hidden.
$("#btn").click(function () {
$("#txt").slideDown();
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...