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>
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
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><styletype="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><h1align="center">Silde Down Example</h1><center><divid="f1">Slide down Effect</div><divid="p1">Welcome to GeeksForGeeks.</div></center><scripttype="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><styletype="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><h1align="center">Slide Up Example</h1><center><divid="f2">Slide up Effect</div><divid="p2">Welcome to GeeksForGeeks.</div></center><scripttype="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><styletype="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><h1align="center">Slide Up/Down Example</h1><center><divid="f3">Slide up/down Effect</div><divid="p3">Welcome to GeeksForGeeks.</div></center><scripttype="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