jQuery中的動畫

1.show()方法和hide()方法

show()方法和hide()方法是jquery中最基本的動畫方法。在html文件裡，為乙個元素呼叫hide()方法，會將該元素的display樣式改為「none」。

$("element").hide();

與css()方法設定display屬性效果相同。

$("element").css("display","none");

注意hide()方法在將「內容」的display屬性值設定為「none」之前，會記住原先的display屬性值（「block」或「inline」或其他除了「none」之外的值）。當呼叫show()方法時，就會根據hide()方法記住的display屬性值來顯示元素。比如，一元素的display屬性的值是「block」，當單擊「標題」鏈結執行hide()方法的時候，hide()方法會做兩步動作，首先會記住「內容」的display屬性的值「block」，然後把display屬性的值設定為「none」。

show()方法和hide()方法在不帶任何引數的情況下，相當於css("display","none/block/inline")，作用是立即隱藏或顯示匹配的元素，不會有任何動畫。可以指定速度關鍵字，讓元素具有動畫效果，如：

$("element").hide("slow");

其他關鍵字還有「normal」和「fast」。slow的時間是600毫秒，normal是400毫秒，fast是200毫秒。

也可以使用數字定值，如使元素在1秒（1000毫秒）內顯示出來。

$("element").show(1000);

從**執行中，可以發現，show()和hide()會同時對元素的高度、寬度和不透明度同時做操作，直至元素完全顯示或消失。

2.fadein()方法和fadeout()方法

與show()和hide()不同的是，fadein()和fadeout()只改變元素的不透明度。fadeout()方法會在指定的一段時間內降低元素的不透明度，直到元素完全消失（「display:none」）.fadein()則相反。

3.slideup()方法和slidedown()方法

slideup()方法和slidedown()方法只會改變元素的高度。如果乙個元素的display屬性值為「none」,當呼叫slidedown()方法時，這個元素將由上至下延伸顯示。slideup()方法正好相反，元素將由下到上縮短隱藏。

4.自定義動畫方法animate()

通常情況下，當方法無法滿足使用者的各種需求，那就需要對動畫有更多的控制，需要採取一些高階的自定義動畫來解決這些問題。在jquery中，可以使用animate()方法來自定義動畫。其語法結構是:

animate(params,speed,callback);

引數說明如下：

param:乙個包含樣式屬性及值的對映，比如.

speed:速度引數，可選。

callback:在動畫完成時執行的函式，可選。

自定義簡單動畫

有乙個空白的html文件，裡面有乙個id=「panel」的元素，當元素被單擊後，能在頁面上橫向飄動。

<
div 
id="panel"
>
div>

給這個元素新增css樣式。

#panel

為了使這個元素動起來，我們給這個元素新增「left」樣式屬性。（需要改變元素的「top」、「left」、「bottom」、「right」樣式屬性，需要把元素的position設定為「relative」或者「absolute」）。

$(function
(),3000);
})})

點選id為「panel」的元素，會在3秒內向右移動300畫素。

累加、累減動畫

之前**的基礎上，在之前加上「+=」或者「-=」符號即表示在當前位置累加或者累減。

$(function
(),3000); //
在當前位置累加300px
})})

當元素被點選移動後，再次點選還會在現在的基礎上繼續向右移動。稱為動畫的累加。

多重動畫

（1）同時執行多個動畫

如果需要同時執行多個動畫，例如在元素向右滑動的同時，放大元素的高度。根據animate()方法的語法結構，可以寫出一下的**：

$(function
(),3000);
})})

（2）順序執行多個動畫

animate()方法如果對同乙個jquery物件進行操作，可以改為鏈式的寫法。

$(function
(),3000)
.animate(,3000);
})})

**函式

如果最後想改變元素的css樣式。

css("border","5px solid blue");

如果在鏈式操作後直接加上上述**。預期的效果是在動畫的最後一步改變元素的樣式，而實際的效果是，剛開始執行動畫的時候，css()方法就被執行了。出現這個問題的原因是css()方法並不會加入到動畫佇列中麼事立即執行。可以通過**函式（callback）對非動畫方法實現排隊。只要把css()方法寫在最後乙個動畫的**函式裡即可。

$(function(),3000)
.animate(,3000，function());
})})

停止元素的動畫

很多時候需要停止匹配元素正在進行的動畫，例如上例的動畫，如果需要在某處停止動畫，需要使用stop()方法。stop()方法的語法結構為:

stop([clearqueue],[gotoend]);

引數clearqueue和gotoend都是可選的引數，為boolean值。clearqueue代表的是否要清空未執行完的動畫佇列，gotoend代表是否直接將正在執行的動畫跳轉到末狀態。

判斷元素是否處於動畫狀態

再使用animate()方法的時候，要避免動畫基類而導致的動畫與使用者的行為不一致。當使用者快速在某個元素上執行animate()動畫時，就會出現動畫累計。解決辦法是判斷元素是否正處於動畫狀態，如果元素不處於動畫狀態，才為元素新增新的動畫，否則不新增。

if(!$(element).is(":animated"))

這個判斷方法在animate()動畫中經常被用到。

延遲動畫

在動畫執行的過程中，如果想對動畫進行延遲操作，那麼可以使用delay()方法。

$(function
(),3000)
.delay(1000)
.animate(,3000)
.delay(2000)
.fadeout("slow");
})})

delay()方法允許我們將佇列中的函式延時執行。它既可以推遲動畫佇列中函式的執行，也可以用於自定義佇列。

其他動畫方法

jquery還有4個專門用於互動的動畫方法。

♦ toogle(speed,[callback]).

♦ slidetoggle(speed,[easing],[callback]).

♦ fadeto(speed,opacity,[callback]).

♦ fadetoggle(speed,[easing],[callback]).

toogle()

可以切換元素的可見狀態。如果元素是可見的，則切換為隱藏的；如果元素是隱藏的，則切換為可見的。

$("#panel").click(function
())

slidetoggle()

通過高度變化來切換匹配元素的可見性。只調整元素的高度。

$("#panel").click(function
())

fadeto()

可以把元素的不透明度以漸進方式調整到指定的值。值調整元素的不透明度，即匹配的元素的高度和寬度不會發生變化。

$("#panel").click(function
())

當點選標籤後，會在0.6秒內調整到指定的不透明度（20%）

fadetoggle()

通過不透明度變化來切換匹配元素的可見性。這個動畫效果只調整元素的不透明度。

$("#panel").click(function
())

jQuery中的動畫

jQuery 中的動畫

jQuery中的動畫

jQuery中的動畫

相關推薦