jQuery slide
jQuery Effect - Sliding
jQuery sliding method can make elements slide up and down.
Time is worth money, so we provide you with fast and easy-to-understand learning content.
Here, you can get any knowledge you need through an easy-to-understand and convenient mode.
Example
jQuery slideDown()
Demonstrates the jQuery slideDown() method.
jQuery slideUp()
Demonstrates the jQuery slideUp() method.
jQuery slideToggle()
Demonstrates the jQuery slideToggle() method.
jQuery sliding method
With jQuery, you can create sliding effects on elements.
jQuery has the following sliding methods:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() method
jQuery slideDown() method is used to slide elements down.
Syntax:
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after the sliding is completed.
The following example demonstrates the slideDown() method:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#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">点我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
</html>Running Example»
Click the "Run Example" button to view the online example
jQuery slideUp() method
jQuery slideUp() method is used to slide elements up.
Syntax:
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after the sliding is completed.
The following example demonstrates the slideUp() method:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>Running Instance»
Click the "Run Instance" button to view the online instance
jQuery slideToggle() method
jQuery slideToggle() method can be between the slideDown() and slideUp() methods Make the switch.
If elements slide down, slideToggle() slides them up.
If elements slide up, slideToggle() slides them down.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is the name of the function executed after the sliding is completed.
The following example demonstrates the slideToggle() method:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#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">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>Run Example»
Click the "Run Instance" button to view the online instance
