jQuery Sliding Effect
jQuery slide is used to slides the element out of the viewport. Here are some slide methods:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown()
slideDown() method of jQuery is used to slide down an element. Syntax:- $(selector).slideDown(speed, callback);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click here to slide the panel down</div>
<div id="panel">Hi Friends!</div>
</body>
</html>
jQuery slideUp()
jQuery slideUp() method is used to slide up an element. Syntax:$(selector).slideUp(speed, callback);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to here to slide the panel up</div>
<div id="panel">Hi Friends!</div>
</body>
</html>
jQuery slideToggle() Method
The jQuery slidetoggle() method is used to make toggle between the slideUp() and slideDown() method. If the element is slide down, slideToggle() will slide them up and if they are slide up, slideToggle() will slide them down. Syntax:$(selector).slideUp(speed, callback);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click here to slide the panel up and down</div>
<div id="panel">Hi Friends!</div>
</body>
</html>