jQuery的動畫處理總結

時間 2019-11-18

原文原文鏈接

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

queue()/ dequeue()

這兩個方法就像Ajax的XMLHttpRequest對象同樣的隱蔽，不爲常人所知。這兩個方法在動畫處理的時候頗有用，咱們常常會寫一些這樣的代碼json

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

這樣test div的height、width、opacity是同時變化的，有時候咱們不但願同步執行，而是形狀的變化和透明度的變化分開，先變成300*300的div，而後透明度再逐漸變化，咱們須要這麼寫數組

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

同窗們能夠想象一下要是有十個動畫流程，那代碼是什麼樣的，queue()和dequeue()能夠解決此類問題，爲全部的流程方法見一個隊列，讓function依次調用，先看一下語法ide

queue( [queueName ], newQueue ) 操做欲執行隊列方法函數

第一個參數是隊列名稱，不寫的話默認是fx動畫

第二個參數能夠是一個函數數組，存放全部隊列函數，也能夠是一個回掉函數，用於向隊列中添加新函數this

dequeue( [queueName ] ) 爲匹配元素執行隊列中的下一個functionspa

每次調用此方法執行隊列中下一函數code

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 div先變成200*200的，而後再變爲400*400的，每一個動畫都執行回掉函數，調用隊列中下一個方法，兩個動畫依次執行，若是在執行期想再添加某個函數能夠這樣orm

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( "<div>Animation complete.</div>" );
    }
  });