深入學習jQuery的三種常見動畫效果

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/10/06/5932616.html
-Advertisement-
Play Games

× 目錄 [1]顯隱效果 [2]高度變化 [3]淡入淡出 前面的話 動畫效果是jQuery吸引人的地方。通過jQuery的動畫方法，能夠輕鬆地為網頁添加視覺效果，給用戶一種全新的體驗。jQuery動畫是一個大的系列，本文將詳細介紹jQuery的三種常見動畫效果——顯隱效果、高度變化及淡入淡出 顯隱 ...


×
目錄
[1]顯隱效果 [2]高度變化 [3]淡入淡出

前面的話

　　動畫效果是jQuery吸引人的地方。通過jQuery的動畫方法，能夠輕鬆地為網頁添加視覺效果，給用戶一種全新的體驗。jQuery動畫是一個大的系列，本文將詳細介紹jQuery的三種常見動畫效果——顯隱效果、高度變化及淡入淡出

 

顯隱

　　在CSS中，總結過實現元素顯隱的9種思路。而jQuery中的show()和hide()方法是通過改變display屬性來實現元素顯隱效果，它們是jQuery中最基本的動畫方法

【hide()】

　　hide()方法是隱藏元素的最簡單方法。如果沒有參數，匹配的元素將被立即隱藏，沒有動畫。這大致相當於調用.css('display', 'none')

　　display屬性值保存在jQuery的數據緩存中，所以display可以方便以後可以恢復到其初始值。如果一個元素的display屬性值為inline，那麼隱藏再顯示時，這個元素將再次顯示inline

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="box">按鈕</button>
<script>
$('#box').click(function(event){
  $(this).hide();
});
</script>

hide([duration])

　　當提供一個持續時間參數，hide()就變成了一個動畫方法。hide()方法將為匹配元素的寬度、高度及不透明度同時執行動畫。一旦透明度達到0，display樣式屬性將被設置為none，這個元素將不再在頁面中影響佈局

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。預設值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>fast</li>
    <li>normal</li>
    <li>slow</li>
    <li>100</li>
    <li>1000</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    $('#box').show();
})
$('#con li').click(function(){
    $('#box').hide($(this).html())
})
</script>

hide([duration][,easing])

　　hide()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，其他可以使用相關的插件，其中預設值為swing

　　linear表示勻速直線運動，而swing則表示變速運動，如下圖所示

linear

swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>swing</li>
    <li>linear</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    $('#box').show();
})
$('#con li').click(function(){
    $('#box').hide(2000,$(this).html())
})
</script>

hide([duration][,easing][,callback])

　　hide()方法可以接受第三個參數，該參數也是可選參數，該參數是回調函數，表示動畫完成時執行的函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="box">按鈕</button>
<script>
$('#box').click(function(event){
  $(this).hide(1000,function(){
      alert('動畫完成');
　　　 $(this).show();
  });
});
</script>

【show()】

　　show()方法用於顯示元素，與hide()方法用途正好相反，但用法相似

　　[註意]如果選擇的元素是可見的，這個方法將不會改變任何東西

　　如果沒有參數，匹配的元素將被立即顯示，沒有動畫

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<div id="test" style="height: 30px;width: 100px;background:lightblue;display:none;"></div>
<script>
$('#btn').click(function(event){
  $('#test').show();
});
</script>

show([duration])

　　與hide()方法類似，當提供一個持續時間參數，show()就變成了一個動畫方法。show()方法將為匹配元素的寬度、高度及不透明度同時執行動畫

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。預設值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>fast</li>
    <li>normal</li>
    <li>slow</li>
    <li>100</li>
    <li>1000</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#box').hide();
$('#reset').click(function(){
    $('#box').hide();
})
$('#con li').click(function(){
    $('#box').show($(this).html())
})
</script>

show([duration][,easing])

　　show()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，預設值為swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>swing</li>
    <li>linear</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#box').hide();
$('#reset').click(function(){
    $('#box').hide();
})
$('#con li').click(function(){
    $('#box').show(2000,$(this).html())
})
</script>

show([duration][,easing][,callback])

　　show()方法可以接受第三個參數，該參數也是可選參數，該參數是回調函數，表示動畫完成時執行的函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#btn').click(function(event){
  $('#box').show(1000,function(){
      alert('動畫完成')
  });
});
</script>

【toggle()】

　　show()與hide()是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態，然後調用其對應的處理方法。比如顯示的元素，那麼就要調用hide，反之亦然。 對於這樣的操作行為，jQuery提供了一個便捷方法toggle()用於切換顯示或隱藏匹配元素

　　如果沒有參數，toggle()方法是最簡單的方法來切換一個元素可見性

　　通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。如果元素是最初顯示，它會被隱藏，如果隱藏的，它會顯示出來。display屬性將被儲存並且需要的時候可以恢復。如果一個元素的display值為inline，然後是隱藏和顯示，這個元素將再次顯示inline

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#btn').click(function(event){
  $('#box').toggle();
});
</script>

toggle([duration])

　　當提供一個持續時間參數，toggle()成為一個動畫方法。toggle()方法將為匹配元素的寬度、高度及不透明度，同時進行動畫。當一個隱藏動畫後，高度值達到0的時候，display樣式屬性被設置為none，以確保該元素不再影響頁面佈局

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。預設值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>fast</li>
    <li>normal</li>
    <li>slow</li>
    <li>100</li>
    <li>1000</li>
</ul>
<div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#con li').click(function(){
    $('#box').toggle($(this).html())
})
</script>

toggle([duration][,easing])

　　toggle()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，預設值為swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>swing</li>
    <li>linear</li>
</ul>
<div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#con li').click(function(){
    $('#box').toggle(2000,$(this).html())
})
</script>

toggle([duration][,easing][,callback])

　　toggle()方法可以接受第三個參數，該參數也是可選參數，表示回調函數，即動畫完成時執行的函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#btn').click(function(event){
  $('#box').toggle(1000,function(){
      alert('動畫完成')
  });
});
</script>

高度變化

　　使用show()/hide()實現動畫效果時，寬度、高度及透明度會同時變化。若只想讓高度發生變化，則需要使用slideUp()方法和slideDown()方法

【slideUp()】

　　slideUp()方法將元素由下到上縮短隱藏

　　[註意]沒有參數時，持續時間預設為400毫秒

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#btn').click(function(event){
  $('#box').slideUp();
});
</script>

slideUp([duration])

　　slideUp()方法可以接受一個持續時間參數

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。預設值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>fast</li>
    <li>normal</li>
    <li>slow</li>
    <li>100</li>
    <li>1000</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    $('#box').show();
})
$('#con li').click(function(){
    $('#box').slideUp($(this).html())
})
</script>

slideUp([duration][,easing])

　　slideUp()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，預設值為swing，其他可以使用相關的插件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>swing</li>
    <li>linear</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="display:inline-
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Json的語法及使用方法
    Json的語法及使用方法 Json（JavaScript Object Notation）對象表示標識，是一種輕量級的數據交換語言，比XML更容易解析，獨立於語言和平臺。 語法規則： 對象用{}保存 數據用鍵值對保存 數據間由逗號分隔 數組用[]保存 如下所示： {"id":1,"name":"jo ...
  • js中的text()，html() ，val()的區別
    js中的text()，html() ，val()的區別 text()，html() ，val()三個方法用於html元素的存值和取值，但是他們各有特點，text()用於html元素文本內容的存取，html()不但可以用於html元素文本內容的存取，還可以用於html內容的存取。val()用於inpu ...
  • js中的回調函數的理解和使用方法
    js中的回調函數的理解和使用方法 一. 回調函數的作用 js代碼會至上而下一條線執行下去，但是有時候我們需要等到一個操作結束之後再進行下一個操作，這時候就需要用到回調函數。 二. 回調函數的解釋 因為函數實際上是一種對象，它可以存儲在變數中，通過參數傳遞給另一個函數，在函數內部創建，從函數中返回結果 ...
  • js迴圈的總結
    js原生的迴圈有兩種，一般的for迴圈和for...in迴圈。還有一種常用jQuery.each()迴圈。 一. js原生迴圈 a. for迴圈，代碼如下： var myArray = [1,2,3];for (var i = 0; i < myArray.length; i++) { consol ...
  • 對於JS == 運算的一些理解
    聲明：本文是摘自一篇文章，放在這隻為做為一個筆記能更好學習。 大家知道，==是JavaScript中比較複雜的一個運算符。它的運算規則奇怪，容易讓人犯錯，從而成為JavaScript中“最糟糕的特性”之一。 在仔細閱讀了ECMAScript規範的基礎上，畫了一張圖，通過它你會徹底地搞清楚關於==的一 ...
  • HTML5移動開發環境介紹
    介紹 本人移動開發小白一名，最近有需求要開發一款移動app，要求跨平臺（Ios&Android）第一反應就是幾年前看到的HTML5移動開發技術。大半天的找尋之後，發現DCloud的前臺框架MUI，已經很好的彌補了html5相比原生開發中存在的卡頓、載入緩慢等問題，結合native.js後可以調用移動 ...
  • box-shadow探秘
    SHOW ME WHAT YOU WANT TO DO 優點，環環可以加特效，box-shadow的特點：1、盒子即使透明會有遮罩效果（於是通過偏移可以製作出月牙效果）2、第四個參數代表陰影的內縮和外放（通過它來控制月牙的粗細）3、其他的參數：偏移參數、模糊程度參數和顏色（模糊程度參數用以模仿陰影效 ...
  • 最全前端資源彙集 (持續整理中)
    註意 轉載須保留原文鏈接（http://www.cnblogs.com/wzhiq896/p/5935209.html）作者：wangwen896 整理 綜合類 入門類 工具類 綜合效果搜索平臺 團隊Blog|周報類 開發中心 Nodejs 綜合API Ecmascript Js template ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類