jQuery中的slideUp()、slideDown()、hide()、show()用法汇总
- 巴扎黑原创
- 2017-06-29 11:03:162164浏览
slideUp(speed,[callback])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
slideDown(speed,[callback])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来
hide()
隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
show()
显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
<head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
background:url(bg.jpg);
}
img{
border:1px solid #000000;
margin:8px;
}
input{
border:1px solid #000000;
font-size:13px; padding:2px;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#000000;
}
p{
background-color:#FFFF00;
height:80px; width:80px;
border:1px solid #000000;
float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:eq(0)").click(function(){
$("p").add("img").slideUp(1000);
});
$("input:eq(1)").click(function(){
$("p").add("img").slideDown(1000);
});
$("input:eq(2)").click(function(){
$("p").add("img").hide(1000);
});
$("input:eq(3)").click(function(){
$("p").add("img").show(1000);
});
});
</script>
</head>
<body>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<p></p><img src="test.jpg">
</body>以上是jQuery中的slideUp()、slideDown()、hide()、show()用法汇总的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn