資訊專欄INFORMATION COLUMN
摘要：創(chuàng)建一個有背景色的添加方法如下當頁面載入后，會逐漸消失，動畫效果如同直接使用方法。動畫并發(fā)效果當對多個元素應(yīng)用動畫效果時，這些效果是同時發(fā)生的，即并發(fā)的。
除了使用 jQuery 內(nèi)置的 hide,show,toggle 等方法來展現(xiàn)效果，還可以使用更為強大的 animate 方法來展現(xiàn)動畫效果。
創(chuàng)建一個有背景色的 div：
添加 jQuery 方法如下：
$(function() {
$("div").animate({"height": "hide"}, "slow");
});
當頁面載入后，div 會逐漸消失，動畫效果如同直接使用 hide 方法。
animate 的第一個參數(shù)為包含屬性及其值的對象，第二個參數(shù)為時長。
.animate() 方法有兩種形式：
第一種形式有四個參數(shù)：
1.一個包含樣式屬性及值的對象
2.可選的時長參數(shù)
3.可選的緩動（easing）類型
4.可選的回調(diào)函數(shù)
第二種形式有兩個參數(shù)：
1.一個屬性對象
2.一個選項對象
仍舊以上例中的 div 為例，我們可以同時對該 div 的多個屬性添加動畫效果，添加 jQuery 代碼如下：
$("div").animate({"height": "+=100px", "width": "+=100px"}, "slow");
此時對 div 的 height 和 width 屬性同時生效，div 擴大一倍。
動畫排隊效果對多個屬性添加動畫效果時，如果我們希望效果具有先后順序，即排隊效果的話，可以使用 jQuery 連綴來實現(xiàn)。
同樣是上例，修改 jQuery 代碼如下：
$("div").animate({"height": "+=100px"}, "slow")
.animate({"width": "+=100px"}, "slow");//連綴
此時，div 的 height 屬性先發(fā)生變化，width 屬性隨后發(fā)生變化。
queue 屬性這里使用 animate 方法的第二種形式來測試 queue 屬性：
1.當 queue 值為 false 時
$("div").animate({"height": "+=100px"}, {duration: "slow", queue: false})
.animate({"width": "+=100px"}, {duration: "slow", queue: false});
此時，排隊效果失效，div 的 height 和 width 屬性變化同時發(fā)生。
2.當 queue 值為 true 時
$("div").animate({"height": "+=100px"}, {duration: "slow", queue: true})
.animate({"width": "+=100px"}, {duration: "slow", queue: true});
此時，排隊效果生效，div 的 height 屬性先發(fā)生變化，width 屬性隨后發(fā)生變化。
動畫并發(fā)效果當對多個元素應(yīng)用動畫效果時，這些效果是同時發(fā)生的，即并發(fā)的。舉例如下：
jQuery 代碼如下：
$(function() {
$("#a").animate({"height": "+=100px"}, "slow");
$("#b").animate({"height": "+=100px"}, "slow");
});
此時頁面載入后，id 為 a 和 b 的 div 的高度同時發(fā)生改變。
參考http://book.douban.com/subject/24669823/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78160.html
摘要：我們可以利用可以對用戶發(fā)起的事件進行處理，這里以樣式轉(zhuǎn)換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。 我們可以利用 jQuery 可以對用戶發(fā)起的事件進行處理，這里以樣式轉(zhuǎn)換為例來說明。 增添樣式 基于用戶的事件，對特定的 DOM 元素樣式進行轉(zhuǎn)換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...
摘要：此時，點擊新建的將會觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。 我們知道通過 $() 函數(shù)可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內(nèi)容，實際上，我們還可以通過該函數(shù)做更多的事情，例如添加、刪除、復制等操作來改變 DOM 樹的結(jié)構(gòu)。 創(chuàng)建元素 我們可以通過 $() ...
摘要：在元素一篇學習了通過方法可以為元素添加樣式，但是對樣式的操作不僅僅限于添加，例如取得元素特定樣式，設(shè)置元素樣式等等。設(shè)置樣式提供了一個方法來操作樣式，這個方法將獲取樣式設(shè)置樣式的作用集中了在一起，非常方便我們對元素樣式進行操作。 在元素一篇學習了通過 addClass 方法可以為元素添加樣式，但是對樣式的操作不僅僅限于添加，例如取得元素特定樣式，設(shè)置元素樣式等等。 設(shè)置樣式 jQu...
摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。 為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下： ...
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
閱讀 3164·2021-11-22 14:45
閱讀 3314·2019-08-29 13:11
閱讀 2316·2019-08-29 12:31
閱讀 935·2019-08-29 11:21
閱讀 3001·2019-08-29 11:09
閱讀 3628·2019-08-28 18:11
閱讀 1433·2019-08-26 13:58
閱讀 1286·2019-08-26 13:27
