您的位置：首页 > Web前端 > JQuery

jQuery slideDown() slideUp() slideToggle() 效果方法 滑动方式显示和隐藏

2019-01-23 18:18 405 查看

jQuery slideDown() 方法 显示

以滑动方式显示被选元素，slideDown() 适用于通过 jQuery 方法隐藏的元素，或在 CSS 中声明 

display:none
隐藏的元素，不适用于通过 visibility:hidden 隐藏的元素，如需以滑动方式隐藏元素，可结合 slideUp() 方法。
基本语法 
$(selector).slideDown(speed,easing,callback)

以滑动方式显示所有隐藏的 <p> 元素：
<script>
$("button").click(function(){
$("p").slideDown();
});
</script>
  • speed：可选，规定隐藏效果的速度，值包括 毫秒，“slow”，“fast”
  • easing：可选，默认值为 
    "swing"
    ，规定在动画的不同点上元素的速度
    "swing" - 在开头/结尾移动慢，在中间移动快
    "linear" - 匀速移动
  • callback：可选，hide() 方法执行完之后，要执行的回调函数。

jQuery slideUp() 方法 隐藏

以滑动方式隐藏被选元素，参数设置同 slideDown() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp(1500);
});
$(".btn2").click(function(){
$("p").slideDown(1000);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>

jQuery slideToggle() 方法

slideUp() 和 slideDown() 方法之间的切换，参数相同

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
/* slideDown() 和 slideUp() 的时间都是 1000 毫秒*/
$("p").slideToggle(1000);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 slideUp() 和 slideDown()</button>
</body>
</html>

Reference

jQuery slideToggle() 方法
jQuery slideUp() 和 slideDown() 方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航