jQuery | Animation, Slide methods with Examples

12 Feb, 2019
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 clickedAfter the Animate Me is clicked
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><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></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 EffectAfter the Down Effect
$(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><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></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 EffectAfter 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><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></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 EffectAfter the Up Effect
$(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><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></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 EffectAfter 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);wherespeed 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><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></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 EffectWhen the Up/Down Strip is clicked first timeWhen the Up/Down Strip is clicked second time
$(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><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></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 EffectWhen the Up/Down Strip is clicked first timeWhen the Up/Down Strip is clicked second time
jQuery-Basics
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.