jQuery的動畫處理總結

最近一年多一直在做前端的東西，由於老闆在追求一些年輕動感的效果，讓頁面元素不能僅僅是簡單的隱藏顯示，所以經常會使用一些動畫效果，發現jQuery的動畫真心好用啊，把常用的幾個總結一下，希望不再每次使用的時候還去翻API

queue()/ dequeue()

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

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

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

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

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

queue( [queueName ], newQueue ) 操作欲執行佇列方法

第一個參數是佇列名稱，不寫的話預設是fx

第二個參數可以是一個函數數組，存放所有隊列函數，也可以是一個回掉函數，用於向隊列中添加新函數

dequeue( [queueName ] ) 為匹配元素執行佇列中的下一個function

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

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();

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

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

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

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

clearQueue() / stop()

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

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

# stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用於停止正在進行的動畫

queue：正在進行的動畫隊列名稱

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",
    fontSize: "3em",
    borderWidth: "+=10px"
  }, 1500 );

如果传入了回掉函数，该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活，properties和前一个用法一样，常用options有

duration：动画时间

queue：function队列

step：每次属性调整的回掉函数

complete：完成动画的回掉函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生

要不说jQuery好用，上面这几个配置是不是很熟悉呢

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<p>Animation complete.</p>" );
    }
  });

hover()

严格说这个并不是个动画函数，但是由于低版本IE的hover对很多元素都不起作用，用CSS无法完成很多动作，所以经常需要使用JavaScript进行haver事件的处理。

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

方法很简单，不多介绍了，这样就能把mousein 和mouseout写在一起了。

以上是jQuery的動畫處理總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！