jquery 動畫效果

2021-06-06 01:14:44 字數 1844 閱讀 6747

首先,在做jquery 動畫效果之前,必須先知道jquery動畫效果的實現順序。jquery中,會把所有的動畫效果(如hide,show等)放入乙個佇列中(預設為'fx'),然後依照先進先出的原則執行佇列中的動畫效果。其他的非動畫效果,都不會放入佇列中。並且jquery 會優先執行這些非動畫效果,然後再執行佇列中的動畫效果。那如果我們需要在執行一些動畫操作之後,再執行非動畫操作怎麼辦呢?這個時候就需要了解一些函式queue(),dequeue().

queue(name,[callback]):當只傳入乙個引數時, 它返回並指向第乙個匹配元素的佇列(將是乙個函式陣列,佇列名預設是fx); 當有兩個引數傳入時, 第乙個引數還是預設為fx的的佇列名, 第二個引數又分兩種情況, 當第二個引數是乙個函式時, 它將在匹配的元素的佇列最後新增乙個函式. 當第二個引數是乙個函式陣列時,它將匹配元素的佇列用新的乙個佇列來代替(函式陣列).

$('#object').hide('slow''#goal')).show('slow'

$('#object').hide('slow').queue(function(next)).show('slow');

這樣先實現動畫效果,再實現非動畫效果的功能就實現了。

但是我們發現動畫效果執行都是執行乙個之後再執行另外乙個,那假如我們想要幾個動畫同時執行怎麼辦呢?這就需要用到自定義佇列。

我們知道,預設的佇列是'fx',我們可以建立另外的佇列,讓後讓這個佇列和'fx'佇列同時執行。

$("#object")

.delay(1000,"fader")

.queue("fader",function(next) ,

);

next();

})

.dequeue("fader")

.animate(, )

我們先來看它的思路:把控制不透明度和控向上移動的動畫分別儲存在兩個佇列中,控制向上移動的佇列按預設情況進行(在2000毫秒內完成),而不透明度的控制在1000毫秒內執行,但這個佇列要晚於預設佇列1000毫秒執行

再簡單一點,就是:前1000毫秒,只有控制高度的「fx」佇列執行,而後1000毫秒,控制不透明度的「fader」佇列和控制高度的「fx」並行

首先準備兩個佇列,

乙個是預設的"fx",儲存高度變化動畫:?

.animate(, )

用來另乙個是自定義的"fader"的佇列,來儲存不透明度變化的動畫:?

.animate(, );

注意上面這段**中的"queue:false",這是很關鍵的一句話,目的是讓這個animate不進入預設的"fx"佇列中

任何的動畫效果都會進入"fx"佇列中,即使你定義在.queue()中的動畫也是一樣,並且動畫效果,務必會按順序執行

JQuery動畫效果

show 顯示隱藏的匹配元素 hide 隱藏顯示的元素 slideup 滑走 元素不能復原 slidetoggle 滑走 元素可以復原 感覺今天寫的並沒有什麼卵用 因為這是動的啊!但是看在iphone更新的情況下 就寫一下吧 fadein 通過不透明度的變化來實現所有匹配元素的淡入效果注意 不會 影...

jQuery 效果 動畫

jquery animate 方法允許您建立自定義的動畫。開始動畫 jquery jquery animate 方法用於建立自定義動畫。selector animate speed,callback 必需的 params 引數定義形成動畫的 css 屬性。可選的 speed 引數規定效果的時長。它可...

JQuery動畫效果

1.顯示和隱藏 function hide click function box toggle 1000 2.上下滾動 box slideup 1000 box slidedown 1000 box slidetoggle 1000 3.淡入淡出 box fadein 1000 box fadeou...