首頁 > web前端 > js教程 > 主體

jQuery中的slideUp()、slideDown()、hide()、show()用法總結

巴扎黑
發布: 2017-06-29 11:03:16
原創
2162 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板