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 src = "https://code.jquery.com/jquery-1.12.4.min.js" > </ 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;" > w3wiki </ 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 >w3wiki - A computer science portal for Beginner.</ 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 src = "https://code.jquery.com/jquery-1.12.4.min.js" > </ 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;" > w3wiki </ 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 >w3wiki - A computer science portal for Beginner.</ 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”: