當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery中的slideUp()、slideDown()、hide()、show()

發布時間：2025/4/16 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 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">

</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
?$("input:eq(0)").click(function(){
??$("div").add("img").slideUp(1000);
?});
?$("input:eq(1)").click(function(){
??$("div").add("img").slideDown(1000);
?});
?$("input:eq(2)").click(function(){
??$("div").add("img").hide(1000);
?});
?$("input:eq(3)").click(function(){
??$("div").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>
?<div></div><img src="test.jpg">
</body>

總結

以上是生活随笔為你收集整理的jQuery中的slideUp()、slideDown()、hide()、show()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Eclipse 代码提示功能设置
下一篇： js定时器