JQuery入門（六）JQuery動畫效果
阿新 • • 發佈：2018-11-26
前言
本章概要的講解一下JQuery的動畫效果
方法
本章的例項程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> </script> </head> <body> <div> <form action="#" method="post" id="ff"> <h5>註冊資訊</h5> 使用者名稱：<input type="text" name="username" id="username" value="張三"/><span id="usernameSpan"></span><br/> 性 別：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<span></span><br/> 愛 好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳 <input type="checkbox" name="hobby" value="棋牌" />棋牌<span></span><br/> 畢業院校：<select name="school" id="school" class="sd"> <option value="--請選擇--">--請選擇--</option> <option value="清華大學">清華大學</option> <option value="北京大學">北京大學</option> <option value="挖掘機技術學院">挖掘機技術學院</option> </select><span></span><br/> 個人簡介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><span></span><br/> <input id="sub" type="button" value="提交"/> <input type="reset" name="" id="" value="重置" /> </form> </div> </body> </html>
1.使用jquery實現顯示與隱藏
語法1：元素物件.show()：顯示該元素物件
語法2：元素物件.hide()：隱藏該元素物件
例項：將提交按鈕繫結單擊事件，點選效果為將h5標籤進行隱藏
$(function(){
$("body").on("click","#sub",function(){
$("h5").hide();
});
});大家目前主要記住這個方法就可以了，動畫效果我們這裡知道就行
附錄：JQuery動畫效果方法大全
| 方法 | 描述 |
|---|---|
| animate() | 對被選元素應用"自定義"的動畫 |
| clearQueue() | 對被選元素移除所有排隊函式（仍未執行的） |
| delay() | 對被選元素的所有排隊函式（仍未執行）設定延遲 |
| dequeue() | 移除下一個排隊函式，然後執行函式 |
| fadeIn() | 逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度，從可見到隱藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| 在 fadeIn() 和 fadeOut() 方法之間進行切換 | |
| finish() | 對被選元素停止、移除並完成所有排隊動畫 |
| hide() | 隱藏被選元素 |
| queue() | 顯示被選元素的排隊函式 |
| show() | 顯示被選元素 |
| slideDown() | 通過調整高度來滑動顯示被選元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之間的切換 |
| slideUp() | 通過調整高度來滑動隱藏被選元素 |
| stop() | 停止被選元素上當前正在執行的動畫 |
| toggle() | hide() 和 show() 方法之間的切換 |