Lesson 10 The Slide Methods

10.1 The slideDown() Method

The slideDown() method is used to slide down a hidden HTML element. You can add a speed parameter fast, slow or milliseconds to specify the speed of sliding down the element.

Example 10.1

This example slides down a hidden image.

<!DOCTYPE html>
<html>
<head>
<script>
$("#btn1").click(function(){
        $("#twin1").slideDown("slow");
    });
});
</script>
</head>
<body>
<button id="btn1">Click to slide down in the hidden image</button><br>
<img id="twin1" src="twin.jpg" style="display:none; width:50%; height:auto">
</body>
</html>

10.2 The slideUp() Method

The slideUp() method is used to slide up an element. You can add the speed parameter fast, slow or milliseconds to specify the sliding speed.

Example 10.2

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn2").click(function(){
        $("#twin2").slideUp(3000);
    });
});
</script>
</head>
<body>
<button id="btn2">Click to slide up the image</button><br>
<img id="twin2" src="twin.jpg" style="width:50%; height:auto">

</body>
</html>

10.3 The slideToggle() Method

The jQuery slideToggle() method toggles between the slideDown() and the slideUp() methods. You can add speed parameter 'slow', 'fast' or milliseconds to specify the sliding speed

Example 10.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
        $("#twin3").slideToggle(4000);
    });
});
</script>
</head>
<body>
<button id="btn3">Click to slide down and slide up the image</button><br>
<img id="twin3" src="twin.jpg" style="display:none; width:50%; height:auto">
</body>
</html>

10.4 The stop() Method

You can use the stop() method to stop the sliding action. In fact, it is be used to kill any jQuery animation.

Example 10.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn4").click(function(){
        $("#twin4").slideUp(4000);
    });
	  $("#btn5").click(function(){
        $("#twin4").stop();
    });
});
</script>
</head>
<body>
<button id="btn4">Click to slide up the image</button>
<button id="btn5">Click to stop sliding</button><br>
<img id="twin5" src="twin.jpg" style="display:none; width:50%; height:auto">
</body>
</html>

❮ Previous Lesson Next Lesson ❯