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中文網其他相關文章!