Rumah > Artikel > hujung hadapan web > jQuery中的slideUp()、slideDown()、hide()、show()用法汇总

jQuery中的slideUp()、slideDown()、hide()、show()用法汇总

巴扎黑asal: 2017-06-29 11:03:162138semak imbas

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>

Atas ialah kandungan terperinci jQuery中的slideUp()、slideDown()、hide()、show()用法汇总. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js中的三种继承方式与优缺点Artikel seterusnya：jQuery中slideUp 和 slideDown 的点击事件

Artikel berkaitan

Lihat lagi