jQuery Sliding Effects
Using jQuery you can slide html element up and down. We can use the following methods to hide and show an HTML element with sliding effect .- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown()
Syntax
$(selector).slideDown(duration,callback);
jQuery slideDown() method is used to show the hidden HTML element where it looks like the content is getting shown by sliding down.
$("#slide").slideDown("slow");
<div id="slide"> Slide Down Demo </div>
Browser View Slide Down Demo
<html>
<head>
<title>jQuery Sliding</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#slide").slideDown("slow");
});
});
</script>
<style type="text/css">
div{
padding: 25px;
background: red;
width:25%;
}
div{
display: none;
height: 50px;
}
</style>
</head>
<body>
<button>Slide Down</button>
<br><br>
<div id="slide"> Slide Down Demo </div>
</body>
</html>
jQuery slideUp()
Syntax
$(selector).slideUp(duration,callback);
jQuery slideUp() method is used to hide the HTML element where it looks like the content is getting hidden by sliding up .
$("#slide").slideUp("slow");
<div id="slide"> Slide Up Demo </div>
Browser View Slide Up Demo
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#slide").slideUp("slow");
});
});
</script>
<style type="text/css">
div{
padding: 25px;
background: red;
width:25%;
}
div{
height: 50px;
}
</style>
</head>
<body>
<button>Slide Up</button>
<div id="slide"> Slide Up Demo </div>
</body>
</html>
jQuery slideToggle()
Syntax
$(selector).slideToggle(duration,callback);
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
$("#slide").slideToggle("slow");
<div id="slide"> Slide Toggle Demo </div>
Browser View Slide Toggle Demo
<html>
<head>
<title>jQuery Slide Toggle</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#slide").slideToggle("slow");
});
});
</script>
<style type="text/css">
div{
padding: 25px;
background: red;
width:10%;
}
div{
height: 50px;
}
</style>
</head>
<body>
<button>Slide Toggle</button>
<div id="slide"> Slide Toggle Demo </div>
</body>
</html>
Related Topics