深入學習jQuery自定義動畫

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

× 目錄 [1]屬性對象 [2]可選參數 [3]選項參數 前面的話 很多情況下，前面介紹的jQuery動畫的簡單效果無法滿足用戶的各種需求，那麼就需要對動畫有更多的限制，需要採取一些高級的自定義動畫來解決這些問題。本文將詳細介紹jQuery的自定義動畫animate 屬性對象 animate()方法 ...


×
目錄
[1]屬性對象 [2]可選參數 [3]選項參數

前面的話

　　很多情況下，前面介紹的jQuery動畫的簡單效果無法滿足用戶的各種需求，那麼就需要對動畫有更多的限制，需要採取一些高級的自定義動畫來解決這些問題。本文將詳細介紹jQuery的自定義動畫animate

 

屬性對象

　　animate()方法的常規使用和之前介紹的3種常見動畫的使用方法類似

animate(properties[,duration][,easing][,complete])

　　animate()方法的第一個參數是一個必須參數，表示一個CSS屬性和值的對象，動畫將根據這組對象移動

　　所有用於動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。例如，width、height或者left可以執行動畫，但是background-color不能

　　當然，除了樣式屬性，一些非樣式的屬性，如scrollTop、scrollLeft以及自定義屬性，也可應用於動畫

　　下麵以元素向右移動100px為例，此時需要將元素設置為定位元素

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

　　CSS簡寫屬性(如font、background、border)沒有得到充分的支持，只支持單一數值屬性

　　[註意]中劃線和小駝峰兩種形式都可以使用

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="reset">恢復</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'border-left-width':'20px'});
});
$('#btn2').click(function(event){
  $('#box').animate({'borderLeftWidth':'20px'});
});
</script>

　　除了定義數值，每個屬性能使用'show'、'hide'和'toggle'，這些快捷方式允許定製隱藏和顯示動畫用來控制元素的顯示或隱藏

animate({opacity:'show'}) 相當於 fadeIn()
animate({opacity:'hide'}) 相當於 fadeOut()
animate({opacity:'toggle'}) 相當於 fadeToggle()
animate({opacity:'0.5'}) 相當於 fadeTo(0.5)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({'opacity':'toggle'});
});
$('#btn2').click(function(event){
  $('#box').fadeToggle();
});
</script>

animate({height:'show'}) 相當於 slideDown()
animate({height:'hide'}) 相當於 slideUp()
animate({height:'toggle'}) 相當於 slideToggle()
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({'height':'toggle'});
});
$('#btn2').click(function(event){
  $('#box').slideToggle();
});
</script>

　　show()、hide()、toggle()方法不添加參數時，將沒有動畫效果

animate({height:'show',width:'show',opacity:'show'}) 相當於show(400)
animate({height:'hide',width:'hide',opacity:'hide'}) 相當於hide(400)
animate({height:'toggle',width:'toggle',opacity:'toggle'}) 相當於toggle(400)
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({height:'toggle',width:'toggle',opacity:'toggle'}) ;
});
$('#btn2').click(function(event){
  $('#box').toggle(400);
});
</script>

　　動畫屬性也可以是一個相對值。如果提供一個以+= 或 -=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">增加</button>
<button id="btn2">減少</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'width':'+=100'});
});
$('#btn2').click(function(event){
  $('#box').animate({'width':'-=100'});
});
</script>

　　如果第一個參數對象中存在多種值，則表示該元素將同時執行多個動畫

　　[註意]屬性值的單位預設是像素px，其他單位如em和%需要指定使用

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

　　如果要按照順序執行多個動畫，而不是同時執行動畫，則只需要把代碼拆開，然後按照順序寫就可以了

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

可選參數

　　animate(properties[,duration][,easing][,complete])方法中除了第一個屬性對象是必需參數，其餘參數都是可選參數。接下來，介紹animate()方法的可選參數

持續時間

　　animate()方法的第二個參數持續時間，用一個字元串或者數字決定動畫將運行多久。預設值為"normal"，有三種預定速度的字元串"slow"、"normal"、"fast"分別表示600ms、400ms和200ms

　　[註意]如果要自定義持續時間，需要設置為數字(如400)，而不要設置為字元串'400'，否則將不生效

<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="position:relative;display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#con li').click(function(){
    var value = $(this).html();
    $('#box').animate({left:100},isNaN(Number(value)) ? value:Number(value))
})
</script>

動畫效果

　　動畫效果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="position:relative;display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#con li').click(function(){
    $('#box').animate({'left':'200'},1000,$(this).html())
})
</script>

回調函數

　　回調函數是第三個可選參數，表示動畫完成時執行的函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},function(){
      alert(1);
  });
});
</script>

選項參數

　　animate()方法的另一種用法是使用選項參數options

animate(properties,options)

　　使用選項參數時，animate()方法的第一個參數仍然是屬性對象，第二個參數是一組包含動畫選項的值的集合。支持以下選項:

【1】duration(default:400)

　　duration參數表示一個字元串或者數字決定動畫將運行多久

【2】easing(default:swing)

　　easing參數表示過渡使用哪種緩動函數

【3】complete

　　complete參數表示在動畫完成時執行的函數

【4】queue(default:true)

　　queue參數表示是否將動畫放置在效果隊列中，如果為false時，將立即開始動畫

　　從jQuery1.7開始，該項也可以接受一個字元串，表示動畫被添加到由該字元串表示的隊列中

【5】specialEasing

　　specialEasing參數表示由animate()方法的第一個參數properties定義的一個或多個CSS屬性，及其相應的緩動函數組成的鍵值對map

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px','width':'100px'},{
      specialEasing:{
          left:'linear',
          width:'swing'
      }
  });
});
</script>

【6】step

　　step參數表示每個動畫元素的每個動畫屬性將調用的函數

　　step參數接受兩個參數(now和fx)，this表示當前正在執行動畫的DOM元素集合

　　其中，now表示每一步動畫屬性的數字值，而fx是jQuery.fx原型對象的一個引用，其中包含了多項屬性，比如elem表示前正在執行動畫的元素，start和end分別為動畫屬性的第一個和最後一個的值，prop為進行中的動畫屬性

　　[註意]step函數被每個動畫元素的每個動畫屬性調用

　　以下代碼中，通過設置第0個div元素的step參數，使其餘div元素也進行相同的運動 

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<div style="position:relative;height: 100px;width: 300px;background-color: lightyellow"></div>
<div style="position:relative;height: 100px;width: 300px;background-color: lightgreen"></div>
<script>
$('#reset').click(function
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 瀑布流佈局學習
    一、JS實現瀑布流 index.html:頁面結構 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流佈局</title> 6 <link rel="stylesheet" href= ...
  • 深入學習jQuery動畫隊列
    [1]queue() [2]dequeue() [3]clearQueue() ...
  • 聖杯佈局和雙飛翼佈局
    聖杯佈局和雙飛翼佈局主要用來解決以下問題： 1.三列佈局，兩側定寬，中間自適應。2.中間欄在瀏覽器中優先載入渲染。 解決思路： 首先把中間的div寫到前面，然後左側，然後右側。這樣就解決了第二個問題，中間的div優先渲染。 但是這樣會存在一個問題，寫到前面的也會顯示在前面。 為瞭解決這個問題，我們讓 ...
  • 【讀書筆記《Bootstrap 實戰》】5.電子商務網站
    構建了公司網站之後，接下來就可以考慮設計一個線上商店了。 此次的設計以上一章的設計為基礎， 只是添加了一個包含如下元素的新頁面： □ 包含商品小圖、標題和說明的產品網格； □ 位於左側的變懶，用於按類別、品牌等篩選商品； □ 方便用戶導航的麵包屑和分頁鏈接。 大家先看一看Zappos (http:/ ...
  • 一個頁面從輸入URL到頁面載入顯示完成，這個過程都發生了什麼？
    對於網址欄的URL不同的操作方式有不同的載入資源、獲取數據的方式，下麵的詳細過程針對"在地址欄輸入URL，按enter(回車)鍵載入資源"此種操作方式做解析，其它的方式的過程大同小異，差異會在後面再做分析。 1. 瀏覽器開啟一個線程來處理這個請求，對URL判斷如果是http協議就按照web方式處理； ...
  • 引用類型之Function類型
    Function類型 ECMAScript中最有意思的就是函數了，有意思的根源，在於函數實際上是對象。每個函數都是Function的實例，具有屬性和方法。而重要的一點是，函數名，不過是指向函數的指針，不會與某個函數綁定。 1.函數定義 （1）創建函數有函數聲明法和函數表達式法。（2）函數名僅僅是指向 ...
  • Sublime Text—自帶快捷鍵介紹
    Sublime Text是個小巧便捷的編輯器，除了眾多好用的插件外，還有它自帶的快捷鍵，打代碼事半功倍，不會用的趕緊看看吧！ ...
  • 前端實現文件的斷點續傳
    早就聽說過斷點續傳這種東西，前端也可以實現一下 斷點續傳在前端的實現主要依賴著HTML5的新特性，所以一般來說在老舊瀏覽器上支持度是不高的 本文通過斷點續傳的簡單例子（前端文件提交+後端PHP文件接收），理解其大致的實現過程 還是先以圖片為例，看看最後的樣子 一、一些知識準備 斷點續傳，既然有斷，那 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類