Open In App

jQuery | Animation, Slide methods with Examples

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery is a very powerful JavaScript framework.Using jQuery, we can add special effects to our website or web-based application.
We can add various effects using jQuery such as hide/show, fading effects, animation, call back and many more.
For hide/show, Toggle, Fade effect.
The jQuery contains the library of several functions that provide techniques for adding animation to a web page. These include simple animation, standard animations.
In this article, we are going to learn how to add above effects to our web page.

jQuery Animation:

In jQuery, we can produce various types of animation using the animate() method. This method can produce simple to complex animation in the web page. Using animation, we can change the properties of HTML elements such as background colour, changing border styles, changing navigation properties, formatting the font properties, etc.
We apply changes to the properties by providing the styles rules in the params parameter of the method.
Syntax:

$("selector").animate({params}, speed, callback);

where

  • params parameter specifies the CSS property to be changed during execution of animate() method . It is the required parameter.
  • speed parameter specifies the speed at which the effect is applied .They can accept only these values : “slow”, “fast” or milliseconds.
  • call back parameter specifies the function to be executed after the execution of animate() method.

Let’s see it’s implementation with JavaScript code:
In this code, we animate the rectangle and change its shape to circle.




<!DOCTYPE html>
<html>
    
<head>
    <script src="https://ajax.googleapis.com/ajax/
                libs/jquery/3.3.1/jquery.min.js">
</script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
    
<body>
    <div></div>
    <br/>
    <button id="animate">Animate Me</button>
    <script type="text/javascript">
        $("#animate").click(function() {
            $("div").animate({
                    width: "200px",
                    height: "200px",
                    borderRadius: "50%",
                    marginLeft: "210px",
                    marginTop: "70px",
                },
                2000,
            );
        });
    </script>
</body>
    
</html>


Output:
Before the Animate Me is clicked

After the Animate Me is clicked

jQuery Slide:

Using jQuery , we can add the slide up or down effect in our web page . The slides are always present in the web page in the form of div pairs . There are three methods to add the sliding effects in our web page .These are as follows:

  • slideDown() :This method makes the element to slide down.
    Syntax:

    $(selector).slideDown(speed,callback);

    Example :In this example, we show the slide down effect .If the Slide Down panel is clicked ,the corresponding change is made to the HTML element.
    Code:




    <!DOCTYPE html>
    <html>
    <head>
                 ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css"
    #p1, #f1 {
        padding: 5px;
        text-align: center;
        background-color: white;
        border: solid 2px green;
        }
    #p1 {
        padding: 50px;
        width:100px;
        display:none;
        color: green;
        font-style: italic;
        }
    #f1 {
        width:190px;
        }    
    </style>
    </head>
    <body>
    <h1 align="center">Silde Down Example</h1>
    <center>
    <div id="f1">Slide down Effect</div>
    <div id="p1">Welcome to GeeksForGeeks.</div>
    </center>
    <script type="text/javascript"
        $("#f1").click(function(){
            $("#p1").slideDown("slow");
        });
    </script>
    </body>
    </html>

    
    

    Output:
    Before the Down Effect

    After the Down Effect

  • slideUp():This method makes the element to slide up.
    Syntax:

    $(selector).slideUp(speed,callback);

    Example :In this example, we show the slide up effect .If the Slide Up panel is clicked ,the corresponding change is made to the HTML element.
    Code:




    <!DOCTYPE html>
    <html>
    <head>
                 libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css"
    #p2, #f2 {
        padding: 5px;
        text-align: center;
        background-color: white;
        border: solid 2px black;
        }
    #p2 {
        padding: 50px;
        width:100px;
        color: green;
        font-style: italic;
        }
    #f2 {
        width:190px;
        }    
    </style>
    </head>
    <body>
    <h1 align="center">Slide Up Example</h1>
    <center>
    <div id="f2">Slide up Effect</div>
    <div id="p2">Welcome to GeeksForGeeks.</div>
    </center>
    <script type="text/javascript"
        $("#f2").click(function(){
            $("#p2").slideUp("slow");
        });
    </script>
    </body>
    </html>

    
    

    Output:
    Before the Up Effect

    After the Up Effect

  • slideToggle() :This method makes the element to slide up/down.
    If the element is in the slide up position, it makes it slide down.
    If the element is in the slide down position, it makes it slide up.
    Syntax:

    $(selector).slideToggle(speed,callback);

    where

    • speed parameter specifies the speed at which the effect is applied .They can accept only these values : “slow” , “fast” or milliseconds.
    • call back parameter specifies the function to be executed after the execution of particular slide method.

    Example :In this example, we show the slide up effect .If the Slide Up panel is clicked ,the corresponding change is made to the HTML element.
    Code:




    <!DOCTYPE html>
    <html>
    <head>
                ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style type="text/css"
    #p3 ,#f3 {
        padding: 5px;
        text-align: center;
        background-color: white;
        border: solid 2px green;
        }
    #p3 {
        padding: 50px;
        width:100px;
        color: green;
        font-style: italic;
        }
    #f3 {
        width:190px;
        }    
    </style>
    </head>
    <body>
    <h1 align="center">Slide Up/Down Example</h1>
    <center>
    <div id="f3">Slide up/down Effect</div>
    <div id="p3">Welcome to GeeksForGeeks.</div>
    </center>
    <script type="text/javascript"
        $("#f3").click(function(){
            $("#p3").slideToggle("slow");
        });
    </script>
    </body>
    </html>

    
    

    Output:
    Before the Effect

    When the Up/Down Strip is clicked first time

    When the Up/Down Strip is clicked second time



Last Updated : 12 Feb, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads