您好,欢迎访问一九零五行业门户网

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

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()用法汇总的详细内容。
其它类似信息

推荐信息