jQuery slideUp，slideDown，slideToggle
jQuery提供了三种有用的滑动效果方法–" slideUp"，" slideDown"和" slideToggle"。
我们可以使用这些方法来显示和隐藏具有滑动效果HTML DOM元素。
jQuery幻灯片
我们将通过示例介绍不同的jQuery滑动方法。
jQuery slideDown()：jQuery slideDown()方法用于显示隐藏HTML元素，看起来就像通过向下滑动显示内容一样。
jQuery slideUp()：jQuery slideUp()方法用于隐藏HTML元素，该元素看起来像是通过向上滑动而隐藏了内容。
jQuery slideToggle()：jQuery slideToggle()方法用于切换具有隐藏和显示效果HTML元素。
如果元素是隐藏的，则它将显示元素，如slideDown()方法。
对于可见元素，它将用作slideUp()方法。
让我们看一下所有带有示例程序的jQuery幻灯片方法。
jQuery slideDown
jQuery slideDown()方法用于所选html元素的向下滑动过渡。
所选元素的height属性具有动画效果，使元素的下部以滑动效果显示。
在slideDown()方法中传递的参数确定此效果的行为。
这是使用slideDown()方法的常规语法。
- slideDown(duration);
- slideDown(duration，callBackfunction);
- slideDown(速度，缓动，callBackfunction);
- slideDown(options);
duration：持续时间的值以毫秒为单位。
我们还可以提供"慢"和"快"之类的字符串值。
默认持续时间为400毫秒。
callBackfunction：滑动转换完成后会触发此函数。
缓动：此参数确定使用哪种缓动功能(如"摆动"或者"线性")进行过渡。
默认值是" swing"。
选项：可以是持续时间，callBackfunction，缓动，特殊缓动等。
jQuery slideDown示例
下面的示例演示了slideDown()方法。
在此示例中，slideDown()方法采用两个参数；持续时间，值" slow"和回调函数。
运行此演示时，您可以看到在滑动效果后触发了回调函数。
jQuery-slideDown.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Down</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".divClass").slideDown("slow",function ()
{
$("#textMsg").text("Slide Down completed.");
});
});
});
</script>
<style>
.divClass
{
padding:5px;
text-align:center;
background-color:green;
border:solid 1px;
}
.divClass
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="btn1">Click Me to slide down</button>
<div class="divClass">theitroad <br>jQuery SlideDown</div>
<div id="textMsg"></div>
</body>
</html>
您可能在许多网页上都遇到了滑倒效果。
这就是我们如何实现jQuery中的下滑效果。
传递给此方法的参数类似于jQuery hide()和show()方法。
下面是上面的jQuery slideDown示例产生的输出。
jQuery slideUp
jQuery slideUp方法用于所选html元素的向上滑动过渡。
选定元素的height属性具有动画效果，使元素的下部隐藏起来具有滑动效果。
在slideUp()方法中传递的参数确定此效果的行为。
这是使用slideUp()方法的常规语法。
- slideUp(持续时间)；
- slideUp(持续时间，callBackfunction);
- slideUp(speed，easing，callbackMethod);
- slideUp(选项);
duration：持续时间的值以毫秒为单位。
我们还可以给出" slow"和" fast"之类的字符串值。
默认持续时间为400毫秒。
callBackfunction：滑动转换完成后会触发此函数。
缓动：此参数确定使用哪种缓动功能(如"摆动"或者"线性")进行过渡。
默认值是" swing"。
选项：可以是持续时间，callBackfunction，缓动，特殊缓动等。
jQuery slideUp示例
下面的示例演示了slideUp()方法。
在此示例中，slideUp()方法采用两个参数。
持续时间，值" slow"和回调函数。
运行此演示时，您可以看到在滑动效果后触发了回调函数。
jQuery-slideUp.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".divClass").slideUp("slow",function()
{
$("#textMsg").text("Slide Up completed.");
});
});
});
</script>
<style>
.divClass
{
margin-top:20px;
padding:10px;
text-align:center;
background-color:green;
border:solid 1px;
height:200px;
width: 300px;
}
</style>
</head>
<body>
<button id="btn1">Click Me to slide up</button>
<div class="divClass"><br>theitroad <br>jQuery SlideUp</div>
<div id="textMsg"></div>
</body>
</html>
这就是我们如何实现jQuery中的向上滑动效果。
传递给此方法的参数类似于jQuery hide()和show()方法。
在设计网页时，这将是一种方便的方法。
jQuery slideToggle
jQuery slideToggle方法用于隐藏或者显示选定HTML元素。
选定元素的height属性具有动画效果，这使元素的下部可以通过滑动过渡来显示或者隐藏。
slideToggle()方法首先检查所选元素的可见性。
如果该元素可见，则它将触发slideUp()方法，否则将触发slideDown()方法。
这是使用slideToggle方法的常规语法。
- slideToggle(持续时间);
- slideToggle(duration，callBackfunction);
- slideToggle(speed，easing，callbackMethod);
- slideToggle(选项);
duration：持续时间的值以毫秒为单位。
我们还可以提供"慢"和"快"之类的字符串值。
默认持续时间为400毫秒。
callBackfunction：滑动转换完成后会触发此函数。
缓动：此参数确定使用哪种缓动功能(如"摆动"或者"线性")进行过渡。
默认值是" swing"。
选项：可以是持续时间，callBackfunction，缓动，特殊缓动等。
jQuery slideToggle示例
下面的示例演示了slideToggle()方法。
在此示例中，slideToggle()方法采用两个参数；持续时间，值" slow"和回调函数。
运行此演示时，您可以在滑动效果后看到回调函数触发器。
jQuery-slideToggle.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Toggle</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".divClass").slideToggle("slow",function()
{
alert("Slide Toggle Method completed.");
});
});
});
</script>
<style>
.divClass
{
margin-top:20px;
padding:10px;
text-align:center;
background-color:green;
border:solid 1px;
height:200px;
width: 300px;
}
</style>
</head>
<body>
<button id="btn1">Click Me to slide Toggle</button>
<div class="divClass"><br>theitroad <br>jQuery SlideToggle</div>
<div id="textMsg"></div>
</body>
</html>
这是我们通过滑动过渡在html元素的隐藏和显示之间切换的方式。
在slideToggle()方法中传递的参数类似于slideUp()和slideDown()方法。
