jQuery Effects - Sliding

The slide methods in jQuery allow you to move any HTML items up and down..

You can also search for these topics, jquery sliding effects for websites, easing the sliding effects, images slide effects, list out all sliding effects, jquery menu and demo sliding effects, background sliding effects.

jQuery Sliding Methods

You may use jQuery to generate an element sliding effect.

Slide methods in jQuery are as follows :

slideDown()
slideUp()
slideToggle()

You can also search for these topics, explain jquery sliding methods, jquery slide left, animate, tabs, panel, how to text over image, video slider, div horizontal, set the background color, panel left to right, jquery fade out sliding left.

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 :-

You can also search for these topics, callback function to slidedown jquery, set the speed slidedown, slidedown not working using jquery, parameters available in jQuery slideDown(), syntax and example for jQuery slideDown(), jQuery slideUp() Method, jquery slideup callback function, how to easing the jquery slideup method, slideup not working, toggle the jquery slideup method, syntax, example, parameter for jQuery slideUp() Method.

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 1
Line 2
Line 3

Line 4
Line 5

You can also search for these topics, slideToggle() Method using jquery, how to use display flex method of slidetoggle, check the speed of jquery slidetoggle, syntax and example for jQuery slideToggle() method.