轉載自個人部落格
jQuery自帶動畫效果
一. 顯示、隱藏
jQuery中.show()
為顯示方法,.hide()
為隱藏方法。
在無引數的時候,只是硬性的顯示內容和隱藏內容。就不用程式碼來演示了,.hide()
方法其實就是把物件的css設為display:none
;而.show()
方法會保留原來的display值,並進行設定。但是在一些場景中會有所改變,在後面進行說明)。
這兩個方法都可以帶引數。
先來說明第一個引數:
-
第一種用法是傳入數字,為毫秒數,表示動畫過渡效果的時間。裡面同時富含了勻速變大變小,以及透明度變換。
<button class="show">顯示</button>
<button class="hide">隱藏</button>
<div id="box">塊</div>
<script>
$(".show").click(function() {
$("#box").show(1000);//顯示用了一秒
});//可以看到很明顯的動畫過渡效果。
$(".hide").click(function() {
$("#box").hide(1000);
});
</script>
-
第二種用法是傳入一個字串。”slow”、”normal”和”fast”,分別對應600毫秒、400毫秒和200毫秒。在傳入空字串或其他字串引數時,預設為400毫秒。
-
傳入一個物件,後面的引數就不能填了,都在物件中。這個比較強大,整合了
show()
方法的多種引數實現效果外,還有一些其他的方法,比如可以動畫執行中的狀態,來執行函式。比較複雜,而且日常使用的話,現在這個就已經夠了,在這裡並不做講述,有興趣的可以自己參考手冊。
特別注意:在傳入了速度之後,內聯元素inline,隱藏顯示過後會變成內聯塊,inline-block。假設你給一個內聯元素的css中設定了寬高,本來不生效,但是在執行隱藏顯示後寬高生效
第二個引數:為可選引數,easing運動方式,這個引數,大部分引數值需要通過外掛來使用,以後再來講解。自帶的引數有兩個:”swing”(緩動)、”linear”(勻速),不填時,預設為”swing”。(注意這裡傳入一個錯誤引數,會報錯)
第三個引數:可選,回撥函式,第一個動畫執行完畢後執行,實現鏈式動畫。
<button class="show">顯示</button>
<button class="hide">隱藏</button>
<div class="test">一</div><div class="test">二</div><div class="test">三</div><div class="test">四</div>
<script>
$(`.show`).click(function () {//鏈式動畫,遞迴自呼叫
$(`.test`).first().show(`fast`, function testShow() {
$(this).next(".test").show(`fast`, testShow);
});//注意next中的限制條件,不然會干擾其他的元素,執行該函式。
});
$(`.hide`).click(function () {
$(`.test`).last().hide(`fast`, function() {
$(this).prev(".test").hide(`fast`, arguments.callee);
});//這裡只是展現有arguments.callee這種方式,並不推薦使用,建議使用函式遞迴自呼叫
});
</script>
我們在使用.show()
和.hide()
的時候,如果需要一個按鈕切換操作,需要進行一些條件判
斷。而 jQuery 提供給我們一個類似功能的獨立方法:.toggle()
。使用方法一樣。
$(".toggle").click(function(){
$("div").toggle("fast");
});
二. 滑動、捲動
jQuery 提供了一組改變元素高度的方法:.slideUp()
、.slideDown()
和.slideToggle()
。顧名思義,向上收縮(捲動)和向下展開(滑動)。
$(`.toggle`).click(function () {
$(`div`).slideToggle();
});
注意:滑動、捲動效果和顯示、隱藏效果一樣,具有相同的引數。不展開講
三. 淡入、淡出
jQuery 提供了一組專門用於透明度變化的方法:.fadeIn()
和.fadeOut()
,分別表示淡入、
淡出,當然還有一個自動切換的方法:.fadeToggle()
。
但是上面三個透明度方法只能是從 0 到 100,或者從 100 到 0,如果我們想設定指定值就沒
有辦法了。而 jQuery 為了解決這個問題提供了.fadeTo()
方法,使透明度到達指定值:
$(".toggle").click(function() {
$("#box").fadeToggle(`slow`);
});
$(".to").click(function() {
$("#box").fadeTo(`slow`, 0.3);//表示30,jQuery中使用的是百分比的形式來設定
});
注意:最先點選to
透明度變成0.3,再點選toggle
,第一次點選隱藏,第二次點選顯示透明度為0.3!(回到原有設定)
淡入、淡出和上面的顯示、隱藏效果一樣,具有相同引數
自定義動畫
jQuery提供了上面幾種簡單常用的固定動畫方面我們使用。但有些時候,這些簡單動畫無法滿足我們更加複雜的需求。這個時候,jQuery 提供了一個
.animate()
方法來建立我們的自定義動畫,滿足更多複雜多變的要求。
強烈建議先看我的《JavaScript完美運動框架的進階之旅》,使用JS基本實現了自定義動畫,只不過jQuery的更加全面完善,當然也更加複雜。
必傳引數只有一個,物件,實現動畫:
$("button").click(function() {
$("#box").animate({
width: "200px",
height: "500px"});
});
這段程式碼已經實現了多重動畫同步運動的效果,使用鍵值對的方式,來表明運動動畫終點的位置。在實現上下左右移動時,需要結合CSS,把物體屬性設定絕對定位!
第二個引數,可選,使用字串時如同上面一樣的3個值表示不同的時間(預設400ms),數字型別時,使用毫秒方式。直接跟在第一個引數之後就好
第三個引數,可選,也和上面一樣,easing運動方式,自帶的引數有兩個:”swing”(緩動)、”linear”(勻速),不填時,預設為”swing”。(注意這裡傳入一個錯誤引數,會報錯)
第四個引數,可選,回撥函式,在動畫執行完畢後執行,可實現鏈式動畫。
下面進行一些特殊的說明:
自定義動畫中,每次開始運動都必須是初始位置或初始狀態,而有時我們想通過當前位置或狀態下再進行動畫。jQuery 提供了自定義動畫的累加、累減功能。
$("button").click(function() {
$("#box").animate({//必須先設定CSS的絕對定位。
left:"+=100px"
});
});
主要是說一下自定義動畫中的鏈式動畫,有兩種形式:
-
在回撥函式中再執行一個動畫,這個沒什麼好說的。
-
通過連綴或順序來實現鏈式動畫。
通過依次順序實現鏈式動畫
$(`button`).click(function () {
$(`#box`).animate({`left` : `100px`});
$(`#box`).animate({`top` : `100px`});
$(`#box`).animate({`width` : `300px`});
});
注意:如果不是同一個元素,就會實現同步動畫
通過連綴實現鏈式動畫
$(`button`).click(function () {
$(`#box`).animate({`left` : `100px`})
.animate({`top` : `100px`})
.animate({`width` : `300px`});
});
鏈式動畫進階
之前我們已經可以實現鏈式動畫了,如果是同一個元素,可以依次順序或連綴呼叫。如果是不同元素,可以使用回撥函式。但有時鏈式動畫太多,回撥函式的可讀性大大降低。為此,jQuery 提供了一組專門用於鏈式動畫的方法。
$(`#box`).slideUp(`slow`).slideDown(`slow`).css(`background`, `orange`);
這段程式碼中,css方法會在一開始就執行。因為動畫方法可以用連綴來實現依次排列,但是css方法不是,會在一開始傳入佇列之前。如何解決呢?回撥函式當然可以實現。
$(`button`).click(function () {
$(`#box`).slideUp(`slow`).slideDown(`slow`,function (){
$(this).css(`background`, `orange`);
});
});
這當然沒問題,但是那並不是我們應該做的,因為這樣可讀性太差了,鏈式動畫一多呢?原本的動畫都不清晰了吧?jQuery為我們實現了一個類似回撥函式的方法:.queue()
。jQuery 的.queue()
的回撥函式可以傳遞一個引數,這個引數是 next 函式,在結尾處呼叫這個 next()方法即可再連綴執行列隊動畫。(不這樣使用的話,後續動畫效果無法實現)
$(`button`).click(function () {//在同一個元素直接這樣寫就可以了。
$(`#box`).slideUp(`slow`)
.slideDown(`slow`)
.queue(function (next) {
$(this).css(`background`, `orange`);
//next();//animate的動畫效果不會生效,因為把next()註釋掉了。
})
.animate({//記得設定絕對定位
height: "200px",
left: "100px"
});
});
.queue()
方法還有一個功能,就是可以得到當前鏈式動畫剩餘的長度(包括當前的動畫)。fx 是預設鏈條的引數。
//把上面的程式碼的第一個動畫改裝成如下模樣時,會彈出4。
$(`#box`).slideUp(`slow`,function (){
alert($(this).queue(`fx`).length);
})
jQuery 還提供了一個清理鏈式動畫的功能方法:.clearQueue()
。把它放入一個鏈式的回撥函式或.queue()
方法裡,就可以把剩下未執行的鏈條給截斷。
//清理後續鏈式呼叫
$(`#box`).slideDown(`slow`, function () {$(this).clearQueue()});
動畫相關方法與全域性屬性
停止動畫
有很多時候,我們需要停止正在執行中的動畫,jQuery中為此提供了一個.stop()
方法。
它有三個可選引數:
-
queue 型別: String 停止鏈式動畫的名稱。(比較少用到,若存在,後兩個引數都是指向該鏈式動畫)
-
clearQueue型別: Boolean一個布林值,指示是否取消後續的鏈式動畫。預設 false.
-
jumpToEnd 型別: Boolean一個布林值指示是否當前動畫立即完成。預設false.
說明:
-
在無引數,且為鏈式動畫時,呼叫
.stop()
方法,只是立即停止當前正在進行的動畫,後續動畫繼續執行。 -
傳入一個true時,立即停止動畫,並且清空後續所有動畫。
-
傳入2個true時,立即停止,並且跳轉到當前動畫的結束位置,後續動畫也不再執行。
程式碼如下:有興趣的自行測試
<button class="start">動畫</button>
<button class="stop">停止</button>
<div style="position: absolute;height: 50px;width: 50px;background-color: #0B71E6;top:30px">12</div>
<script type="text/javascript">
$(`.start`).click(function () {
$(`div`).animate({`left` : `300px`}, 1000)
.animate({`top` : `300px`}, 1000)
.animate({ `width` : `300px`}, 1000)
.animate({`height` : `300px`}, 1000);
});
$(".stop").click(function() {
$("div").stop(true,true);
});
</script>
延遲動畫
有時在執行動畫或鏈式動畫時,需要在運動之前有延遲執行,jQuery 為此提供了.delay()
方法。引數為延遲時間,單位為毫秒數。這個方法可以在動畫之前設定延遲,也可 、以在列隊動畫中間加上。直接在上面程式碼任意地方加都可以,比較簡單,自行測試吧。
獲取正在進行的動畫
在選擇器的那篇文章中中,我們提到過一個過濾器:animated
,這個過濾器可以判斷出當前運動的動畫是哪個元素。通過這個特點,我們可以避免由於使用者快速在某個元素執行動畫時,由於動畫積累而導致的動畫和使用者的行為不一致。
對上面程式碼進行一些改造,將原div進行復制,新增到其後,給原div新增一個id並且在動畫效果中改為該元素運動
$(`.stop`).click(function(){
$(`div:animated`).stop().css(`background`, `red`);
//可以看到只有運動的div背景變色,而未移動的div不改變背景色。
});
動畫全域性屬性
jQuery 提供了兩種全域性設定的屬性,分別為:$.fx.interval
,設定每秒執行的幀數;$.fx.off
,關閉頁面上所有的動畫。
$.fx.interval
屬性可以調整動畫每秒的執行幀數,預設為 13 毫秒。數字越小越流暢,但可能影響瀏覽器效能。
設定執行幀數為 1000 毫秒:$.fx.interval = 1000;
設定動畫為關閉 true:$.fx.off = true;
預設為false