jQuery下的動畫處理總結_jquery-js教程-PHP中文網

queue()/ dequeue()
這兩個方法就像Ajax的XMLHttpRequest物件一樣的隱蔽，不為常人所知。這兩個方法在動畫處理的時候很有用，我們常常會寫一些這樣的程式碼

$('#test').animate({            "width": "300px",
            "height 🎜>        });

這樣test div的height、width、opacity是同時變化的，有時候我們不希望同步執行，而是形狀的變化和透明度的變化分開，先變成300*300的div，然後透明度再逐漸變化，我們需要這麼寫

複製程式碼程式碼如下:

$('#test').animate({            "width": "300px",
            "height         $('#test').animate({ "opacity": "1 " });
        });

同學們可以想像一下如果有十個動畫流程，那程式碼是什麼樣的，queue()和dequeue()可以解決此類問題，為所有的流程方法見一個隊列，讓function依次調用，先來看看語法

queue( [queueName ], newQueue )
操作欲執行佇列方法
第一個參數是佇列名稱，不寫的話預設是fx 第二個參數可以是一個函數數組，存放所有佇列函數，也可以是一個回掉函數，用於在佇列中新增函數

dequeue( [queueName ] )

為匹配元素執行佇列中的下一個function

每次呼叫此方法執行佇列中下一函數

複製碼

程式碼如下:var q = [ $(this).animate({

"height":"200px"

                      function () {
                $(this).animate({
                         "height": "400px"
                   ];

        function next(){
            $('#test').dequeue('myQu)
        $('#test').queue('myQueue', q);
        next();

上面程式碼就是可以讓test div先變成200*200的，然後再變成400*400的，每個動畫都執行回掉函數，呼叫佇列中下一個方法，兩個動畫依序執行，如果在執行期間想再增加某個函數可以這樣

複製程式碼

程式碼如下:

var q = [
            function () {
                 "width": "200px",
                    "高度":"200px"
                }，下一個）
           ),                    "高度": "400px "
                }，且下一個);

        function next(){
            $('#test').dequeue('myQu)
        $('#test').queue('myQueue', q);
        next();
  >            $(this).slideUp().dequeue('myQueue');        });

總而言之這兩個方法就是為了方便動畫依照預定訂單執行

clearQueue() /stop()

這兩個方法主要是為了取消動畫

clearQueue( [queueName ] ) 將佇列中函數清空

stop( [queue ] [, clearQueue ] [, JumpToEnd ] ) 用於停止觸發的動畫

隊列：散發的動畫隊列名稱

clearQueue：本身預設為false，是否將佇列也清空

jumpToEnd：預設為false，立即是否執行動畫如果想停止剛才的動畫可以這麼寫

複製程式碼

程式碼如下：

$('#test').clearQueue('myQueue');

這樣寫不會終止動畫，只是當前動畫執行完成後，不會再調用隊列中下一個動畫（隊列被清空了嘛，沒有下一個了），如果想立即停止動畫，可以這麼寫

複製程式碼

程式碼如下：$('#test').stop();

至於停止動畫是暫停還是立即執行完，就學要配置stop()的參數了

slideDown()/ slideUp()/ slideToggle()

slide效果在做動畫的時候經常會使用，尤其是菜單，這三個函數很簡單，就是元素收起/伸展/自動判斷收起伸展，但是其參數不僅僅是duration，我們還能加一些其他的控制，看看API中的介紹，這Sanger函數參數類似，那slideUp舉例

slideUp( [duration ] [, easing ] [, complete ] ) easing是漸變方式，這個我從來沒有手工改動過，duration不寫的話，默認會用大概一秒的時間完成動畫

slideUp(options)

options中常用的配置有

duration：動畫時間

queue：這看了上面自然會懂

step:動畫過程中每次屬性改動時執行

complete：動畫完成時執行

start：動畫開始時執行

always：動畫被終止或意外發生沒有執行完時發生

這三個函數在執行的時候會修改元素height，在sideUp()執行完後會把height復原，並把diaplay設為none

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()

fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列類似，不再一一說明，只不過這三個函數修改的時元素的透明度，fadeOut()函數在執行完後會將元素opacity復原，並把display屬性設為none

fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就沒有那麼複雜了，但是fadeTO()的duration和opacity不是可省略的，必須寫

show()/ hide()/ toggle()

這三個函數的用法和slide系列一樣，但是在效果上有幾點兒不同

1.如果參數duration不寫，那麼回就立即執行沒有動畫

2.這個動畫同時修改height、width、opacity屬性

3.hide()執行完成後會將height、width、opacity屬性還原，並把display設為none

animate()
有些複雜的動畫靠上面幾個函數不能夠實現，這時候就是強大的animate派上用場的時候了,animate()有兩種用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分屬性都不用解釋，properties是個json，屬性的值可以是字面量、function、”toggle”、簡單表達式，如果是function會把返回值賦給屬性，熟悉jQuery的同學肯定明白“ toggle」是什麼，就是讓一個屬性在初始值和最小值之間切換，能夠使用toggle的屬性有width、height、opacity等包含數字值屬性，簡單表達式是=、-=等，比如可以這麼些“width”:” =10px”。

複製程式碼程式碼如下:

$( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
  }, 1500 );

如果傳入了回掉函數，函數會在動畫執行完後呼叫

.animate( properties, options )

這種用法比較靈活，properties和前一個用法一樣，常用options有

duration：動畫時間

queue：function隊列

step：每次屬性調整的回掉函數

complete：完成動畫的回掉函數

start：動畫開始的時候呼叫

always：動畫被終止或意外發生沒有執行完時發生

要不說jQuery好用，上面這幾個配置是不是很熟悉呢

複製程式碼程式碼如下:

$( "#book" ).animate({

    width: "toggle",
    height: "toggle"
}, {
   🎜>      height: " easeOutBounce"
    },
    complete: function() {
      $( this ).after( "

Animation complete.

$( this ).after( "

Animation complete.

" );

hover()

嚴格說這個並不是個動畫函數，但是由於低版本IE的hover對很多元素都不起作用，用CSS無法完成很多動作，所以經常需要使用JavaScript進行haver事件的處理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很簡單，不多介紹了，這樣就能把mousein 和mouseout寫在一起了。