jQuery Animation: Slide methods with Examples

Last Updated : 03 Oct, 2024

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 a library of several functions that provide techniques for adding animation to a web page. These include simple animation and standard animations.

jQuery Animation

In jQuery, various types of animations can be created using the `animate()` method. This method allows for both simple and complex animations on a web page. With animations, we can modify properties of HTML elements, such as background color, border styles, navigation properties, font formatting, and more. These property changes are applied by specifying the style rules in the `params` parameter of the method.

Syntax:

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

Example: In this code, we animate the rectangle and change its shape to circle.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <title>Animation Example</title>
</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:

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: html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
        src=
"https://ajax.googleapis.com/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>
    <title>Slide Down Example</title>
</head>

<body>
    <h1 align="center">Slide 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: 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. html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
        src=
"https://ajax.googleapis.com/ajax/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>
    <title>Slide Up Example</title>
</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:

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);

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.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
        src=
"https://ajax.googleapis.com/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>
    <title>Slide Up/Down Example</title>
</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:

jQuery UI Slider animate Option

AniketSingh1

Improve

Article Tags :

jQuery Animation: Slide methods with Examples

For hide/show, Toggle, Fade effect

jQuery Animation

Syntax:

jQuery Slide

slideDown():

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

slideToggle()

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?

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