How to create slide left and right toggle effect using jQuery?
The task here is to create a slide left and right toggle effect in the JQuery, you can use the jQuery animate() method.
.animate() method: It is used to change the CSS property to create the animated effect for the selected element.
Syntax:
(selector).animate({styles}, para1, para2, para3);
Approach:
- Actual Box width is stored in the variable whose width value is to be changed.
- .animate() method takes the selector which is to be animate.
- Width style property is given the values as per the requirement.
- width: 0 – For toggle left.
- width: previous value stored – For toggle right.
Example 1:
<!DOCTYPE html>
< html >
< head >
< title >How to create slide left and
right toggle effect using jQuery?</ title >
</ script >
< style type = "text/css" >
.box {
float: center;
overflow: hidden;
background: #32a852;
width: 400px;
padding: 0px;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner {
width: 400px;
padding: 0px;
border: 1px solid #000000;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h3 >jQuery | How to create slide
left and right toggle effect?</ h3 >
< hr >
< div class = "box" >
< div class = "box-inner" >
< h4 >.animate() method is used</ h4 >
< p >GEEKSFORGEEKS - A computer
science portal for geeks.</ p >
</ div >
</ div >
< hr >
< button type = "button" class = "slide-left" >
Click to Slide-Left
</ button >
< button type = "button" class = "slide-right" >
Click to Slide-Right
</ button >
< script type = "text/javascript" >
$(document).ready(function() {
var boxWidth = $(".box").width();
$(".slide-left").click(function() {
$(".box").animate({
width: 0
});
});
$(".slide-right").click(function() {
$(".box").animate({
width: boxWidth
});
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
Before Click on Button:
After Click on Button – “Click To Slide-Left”:
After Click on Button – “Click To Slide-Right”:
Example 2:
<!DOCTYPE html>
< html >
< head >
< title >How to create slide left and
right toggle effect using jQuery?</ title >
</ script >
< style type = "text/css" >
.box {
float: center;
overflow: hidden;
background: #32a852;
width: 400px;
padding: 0px;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner {
width: 400px;
padding: 0px;
border: 1px solid #000000;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h3 >jQuery | How to create slide
left and right toggle effect?</ h3 >
< hr >
< div class = "box" >
< div class = "box-inner" >
< h4 >.animate() method is used</ h4 >
< p >GEEKSFORGEEKS - A computer
science portal for geeks.</ p >
</ div >
</ div >
< hr >
< input onclick = "change()"
type = "button"
class = "slide-toggle"
value = "Click to Slide-Left"
id = "myButton1" >
< script type = "text/javascript" >
$(document).ready(function() {
$(".slide-toggle").click(function() {
if (this.value == "Click to Slide-Left") this.value =
"Click to Slide-Right";
else this.value = "Click to Slide-Left";
$(".box").animate({
width: "toggle"
});
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
Before Click on Button:
After Click on Button – “Click To Slide-Left”:
After Click on Button – “Click To Slide-Right”:
Last Updated :
17 Sep, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...