Skip to content
Related Articles

Related Articles

Improve Article

What are the methods used to provide effects in jQuery ?

  • Difficulty Level : Expert
  • Last Updated : 10 Sep, 2021
Geek Week

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>
  
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery CDN link -->
    <script src=
    </script>
  
    <!-- CSS code for the page -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
    <!-- jquery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
  
    <!-- jquery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
  
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
  
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
  
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jquery code goes here -->
    <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>
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <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>
  
    <!-- jQuery CDN link -->
    <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>
  
    <!-- jQuery code goes here -->
    <script>
  
        // Initially text is hidden.
        $("#btn").click(function () {
            $("#txt").slideDown();
        });
    </script>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :