jQuery Effects - Sliding
The slide methods in jQuery allow you to move any HTML items up and down..
jQuery Sliding Methods
You may use jQuery to generate an element sliding effect.
Slide methods in jQuery are as follows :
slideDown()slideUp()slideToggle()
Related Links
jQuery slideDown() and slideUp() Methods
The slideDown function is used slide an element down (making visible from invisible) from top to bottom.
The slideUp function is used slide an element up (making invisible from visible) from bottom to top.
Syntax :-
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback); The speed and callback parameters are optional.
The optional speed parameter, which can take the values "slow," "rapid," or milliseconds, determines how quickly the hiding/showing happens.
The optional callback parameter is a function to perform after completing the
slideDown() or slideUp() operation.
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#div1").slideDown("slow");
});
$("#b2").click(function () {
$("#div1").slideUp("slow");
});
});
</script>
</head>
<body>
<button id="b1">Slide Down</button>
<button id="b2">Slide Up</button><br /><br />
<div id="div1" style="text-align: center; border: solid 1px #c3c3c3; padding: 50px; display: none;">
Hello world!</div>
</body>
</html> Output :-
Related Links
jQuery slideToggle() Method
The slideToggle() function in jQuery allows you to toggles between the slideDown() and slideUp() methods.
If the elements have been dragged down, they are dropped by slideToggle().
If the items have been dragged up, slideToggle() will return them to their original position.
$(selector).slideToggle(speed,callback); Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b3").click(function () {
$("#div3").slideToggle("slow");
});
});
</script>
</head>
<body>
<button id="b3">Slide Toggle - Down/Up</button><br /><br />
<div id="div3" style="border: solid 1px #c3c3c3;">
Line 1<br />
Line 2<br />
Line 3<br />
<br /><br /><br /><br />
Line 4<br />
Line 5<br />
</div>
</body>
</html> Line 2
Line 3
Line 4
Line 5