In this article we will show you the solution of jQuery animate slide left, the objective at hand is to develop a slide left and right toggling effect in iQuery.
You may do this by using the jQuery animation() method. Now move to the concept of jquery animate slide left.
Step By Step Guide On jQuery Animate Slide Left :-
Use the animation() function of jQuery.
Although jQuery doesn't have a method like slideLeft() or slideRight() that is comparable to slideUp() as well as slideDown(), you can imitate similar effects to use the jQuery animation() method.
.animate() method: The.animate() technique is used to modify a CSS property to produce an animated effect for something like the chosen element.
Syntax:
(selector).animate({styles}, para1, para2, para3);
Strategy:
- In the variables for whom the width values is to be modified, the exact Box width is kept.
- The selector that will be animated is passed to the animate() function.
- According to the specifications, values are supplied for the width style attribute.
- width of 0 indicates a left-toggle.
- width: previously saved value for right-to-toggle.
Jquery Effect – slide effect:
Description :-
Show/hide/toggle and the Slide effect are both supported. As a result, the element slides outside the viewport.
Syntax :-
For this effect, use the straightforward syntax shown here:
selector.hide|show|toggle( "slide", {arguments}, speed );
Parameters :-
The synopsis of every argument is provided below.
- direction − The direction in which an effect occurs. Possibly "left," "right," "up," or "down." Left is the default.
- distance − The impact's distance is called distance.
- mode − The effect's mode is described as mode. either "display" or "hide" is possible. The default setting is show.
Sliding methods in jQuery
You may apply a sliding effect to items using jQuery.
Following are some slide ways offered by jQuery:
- slideDown()
- slideUp()
- slideToggle()
Method slideDown() for jQuery
An element can be slid down using the jQuery slideDown() method.
The slideUp() method of jQuery
A slide up is accomplished by using the jQuery slideUp() method.
slideToggle() method of jQuery
The slideDown() & slideUp() methods can be switched between using the jQuery slideToggle() method.
slideToggle() will move the components back up if they have been sliding down.
If the components have been moved up, slideToggle() will move them back down.
<!DOCTYPE html>
<html>
<head>
<title>Jquery animate slide left</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
.box {
float: center;
overflow: hidden;
background: grey;
width: 400px;
padding: 0px;
}
.box-inner {
width: 400px;
padding: 0px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
Talkerscode
</h1>
<h3>Jquery animate slide left</h3>
<hr>
<div class="box">
<div class="box-inner">
<h4>.animate() method is used</h4>
<p>Welcome to Talkerscode..</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>
- We start our code with HTML & HEAD tags
- After that we provide title to our page.
- After that we use the jquery library.
- Then we use css style for adding border and padding to inner content for better animation effect.
- Then we start our BODY in which we provide headings
- After that we create div-box.
- Then we create two buttons.
- After that we start our script.
- Then we use ready() function to execute jquery code.
- Then we define the box width
- After that we use slide-left function by clicking
- Then we use animate() method.
- Same we use slide-right function by clicking.
- Then we end our program with SCRIPT, BODY & HTML.
Conclusion :-
Consequently, we have effectively acquired knowledge of the jQuery animate slide left technique. Additionally, we learned about jQuery slide effects.
I hope this article on jQuery animate slide left helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
