文章目錄
- 前言
- 一、隐藏、顯示事件
-
- 1、隐藏、顯示
- 2、淡入、淡出
- 3、上拉、下拉
- 總結
前言
提示：這一節内容本來是地方在DOM操作裡面的，但是我看了網上一些參考文檔，發現他們都是把它單獨拎出來作為一種效果方法來講解，是以我也把它拿出來單獨分一個章節。
實際上，效果方法還有很多，後面再做了解。
提示：以下是本篇文章正文内容，下面案例可供參考
一、隐藏、顯示事件
1、隐藏、顯示
表達式：
hide() 隐藏
show() 顯示
還可以使用速度和回調函數來控制。
hide( [速度] , [回調函數] )
速度可以寫數字（毫秒），使用時不需要引号；也可以寫單詞（如fast、slow、normal），使用時需要添加引号。
回調函數一般作為一個函數的參數展現。在一個函數執行完畢時進行調用。
<html>
<head>
<meta charset="utf-8">
<title>jQuery事件</title>
</head>
<body>
<p>點選下面的按鈕，将文本隐藏和顯示</p>
<button onclick="myHide()">隐藏文本</button>
<button onclick="myShow()">顯示文本</button>
<p>點選下面的按鈕，改變文本隐藏和顯示的時間</p>
<button onclick="myHideSec()">隐藏文本</button>
<button onclick="myShowSec()">顯示文本</button>
<p>點選下面的按鈕，看檔案隐藏和顯示完成後的回調函數</p>
<button onclick="myHideSecCall()">隐藏文本</button>
<button onclick="myShowSecCall()">顯示文本</button>
<h3>文本樣例</h3>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
</script>
<script>
$(function(){
});
function myHide(){
$("h3").hide();
}
function myShow(){
$("h3").show();
}
//3000為毫秒，表示3秒。除了數字表示速度之外，還可以用單詞表示，如fast、slow、normal，這些單詞書寫時要加雙引号
function myHideSec(){
$("h3").hide(3000);
}
function myShowSec(){
$("h3").show(3000);
}
function myHideSecCall(){
$("h3").hide(3000,CallBack);
}
function myShowSecCall(){
$("h3").show(3000,CallBack);
}
function CallBack(){
alert("結束了...");
}
</script>
2、淡入、淡出
淡入和淡出，變更的是透明度，和show、hide時間一樣，也可以寫速度和回調
fadeIn() 淡入
fadeOut() 淡出
3、上拉、下拉
上拉和下拉，控制的是高度
slideDown() 下拉，顯示
slideUp() 上拉，隐藏
總結
菜鳥教程
| 方法 | 描述 |
|---|---|
| animate() | 對被選元素應用"自定義"的動畫 |
| clearQueue() | 對被選元素移除所有排隊函數（仍未運作的） |
| delay() | 對被選元素的所有排隊函數（仍未運作）設定延遲 |
| dequeue() | 移除下一個排隊函數，然後執行函數 |
| fadeIn() | 逐漸改變被選元素的不透明度，從隐藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度，從可見到隐藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之間進行切換 |
| finish() | 對被選元素停止、移除并完成所有排隊動畫 |
| hide() | 隐藏被選元素 |
| queue() | 顯示被選元素的排隊函數 |
| show() | 顯示被選元素 |
| slideDown() | 通過調整高度來滑動顯示被選元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之間的切換 |
| slideUp() | 通過調整高度來滑動隐藏被選元素 |
| stop() | 停止被選元素上目前正在運作的動畫 |
| toggle() | hide() 和 show() 方法之間的切換 |
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)