jQuery sliding method can make elements slide up and down.
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 the element down.
Syntax:
$(selector).slideDown(speed,callback);
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideDown("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我滑下面板</div>
<div id="div2">你好啊，美女/帅哥</div>
</body>
</html>Run and try it
jQuery slideUp() method
jQuery slideUp() method is used to slide elements up.
Syntax:
$(selector).slideUp(speed,callback);
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideUp("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
}
</style>
</head>
<body>
<div id="div1">点我拉起面板</div>
<div id="div2">Hello world!</div>
</body>
</html>Run it and try it
jQuery slideToggle() method
jQuery slideToggle() method can switch between slideDown() and slideUp() methods.
If elements slide down, slideToggle() slides them up.
If elements slide up, slideToggle() slides them down.
Syntax
$(selector).slideToggle(speed,callback);
Yes The selected 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideToggle("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我，显示或隐藏面板。</div>
<div id="div2">如果只是相遇，而不能相守，人生最好不相见</div>
</body>
</html>Run and try it
Next Section