jQuery | Animation, Slide methods with Examples

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

    Output:
    Before the Effect

    When the Up/Down Strip is clicked first time

    When the Up/Down Strip is clicked second time



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.