細說 jQuery 樣式篇（二） - 動畫效果

PiscesYE 發布于2019-08-19 14:53 / 771人閱讀

摘要：創建一個有背景色的添加方法如下當頁面載入后，會逐漸消失，動畫效果如同直接使用方法。動畫并發效果當對多個元素應用動畫效果時，這些效果是同時發生的，即并發的。

除了使用 jQuery 內置的 hide,show,toggle 等方法來展現效果，還可以使用更為強大的 animate 方法來展現動畫效果。
創建一個有背景色的 div：

添加 jQuery 方法如下：

$(function() {
  $("div").animate({"height": "hide"}, "slow");
});

當頁面載入后，div 會逐漸消失，動畫效果如同直接使用 hide 方法。
animate 的第一個參數為包含屬性及其值的對象，第二個參數為時長。

兩種形式

.animate() 方法有兩種形式：

第一種形式有四個參數：
1.一個包含樣式屬性及值的對象
2.可選的時長參數
3.可選的緩動（easing）類型
4.可選的回調函數

第二種形式有兩個參數：
1.一個屬性對象
2.一個選項對象

多個屬性添加動畫效果

仍舊以上例中的 div 為例，我們可以同時對該 div 的多個屬性添加動畫效果，添加 jQuery 代碼如下：

$("div").animate({"height": "+=100px", "width": "+=100px"}, "slow");

此時對 div 的 height 和 width 屬性同時生效，div 擴大一倍。

動畫排隊效果

對多個屬性添加動畫效果時，如果我們希望效果具有先后順序，即排隊效果的話，可以使用 jQuery 連綴來實現。
同樣是上例，修改 jQuery 代碼如下：

  $("div").animate({"height": "+=100px"}, "slow") 
          .animate({"width": "+=100px"}, "slow");//連綴

此時，div 的 height 屬性先發生變化，width 屬性隨后發生變化。

queue 屬性

這里使用 animate 方法的第二種形式來測試 queue 屬性：
1.當 queue 值為 false 時

  $("div").animate({"height": "+=100px"}, {duration: "slow", queue: false})
          .animate({"width": "+=100px"}, {duration: "slow", queue: false});

此時，排隊效果失效，div 的 height 和 width 屬性變化同時發生。
2.當 queue 值為 true 時

  $("div").animate({"height": "+=100px"}, {duration: "slow", queue: true})
          .animate({"width": "+=100px"}, {duration: "slow", queue: true});

此時，排隊效果生效，div 的 height 屬性先發生變化，width 屬性隨后發生變化。

動畫并發效果

當對多個元素應用動畫效果時，這些效果是同時發生的，即并發的。舉例如下：

jQuery 代碼如下：

$(function() {
  $("#a").animate({"height": "+=100px"}, "slow");
  $("#b").animate({"height": "+=100px"}, "slow");
});

此時頁面載入后，id 為 a 和 b 的 div 的高度同時發生改變。

參考

http://book.douban.com/subject/24669823/

云服務器 GPU云服務器 jquery動畫效果浮動效果動畫翻轉動畫效果 html動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78160.html

細說 jQuery 事件篇（二） - 處理簡單事件

摘要：我們可以利用可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。增添樣式基于用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...

ckllj 2019-08-19 14:51 評論0 收藏0
細說 jQuery DOM操作篇（二） - DOM 樹操作

摘要：此時，點擊新建的將會觸發。設置元素內容的方法則使用上述兩種方法，將新內容作為參數傳遞即可，例如修改上例中的文本內容方法同理。我們知道通過 $() 函數可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內容，實際上，我們還可以通過該函數做更多的事情，例如添加、刪除、復制等操作來改變 DOM 樹的結構。創建元素我們可以通過 $() ...

Anchorer 2019-08-21 12:20 評論0 收藏0
細說 jQuery 樣式篇（一） - 樣式的獲取與設置

摘要：在元素一篇學習了通過方法可以為元素添加樣式，但是對樣式的操作不僅僅限于添加，例如取得元素特定樣式，設置元素樣式等等。設置樣式提供了一個方法來操作樣式，這個方法將獲取樣式設置樣式的作用集中了在一起，非常方便我們對元素樣式進行操作。在元素一篇學習了通過 addClass 方法可以為元素添加樣式，但是對樣式的操作不僅僅限于添加，例如取得元素特定樣式，設置元素樣式等等。設置樣式 jQu...

chengtao1633 2019-08-19 14:53 評論0 收藏0
細說 jQuery 元素篇（二） - 選擇符

摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規范中的所有選擇符。舉例如下： ...

104828720 2019-08-19 14:51 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0