jquery中的動畫效果總結以及動畫隊列的總結（附程式碼）-js教程-PHP中文網

jquery中的動畫效果總結以及動畫隊列的總結（附程式碼）

不言

發布： 2018-08-15 11:12:51

原創

1711 人瀏覽過

這篇文章帶給大家的內容是關於jquery中的動畫效果總結以及動畫隊列的總結（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

基礎效果

.hide([duration ] [,easing ] [,complete ])

用於隱藏元素，沒有參數的時候等同於直接設定display 屬性

$(&#39;.target&#39;).hide()//等同于
$(&#39;.target&#39;).css(&#39;display&#39;, &#39;none&#39;)

登入後複製

.show()

用於顯示元素，用法和hide#類似

$(&#39;#btn-box1&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).show(&#39;normal&#39;)
})

登入後複製

.toggle()

##用來切換元素的隱藏、顯示，類似

toggleClass，用法和show、hide類似

漸變效果

.fadeIn()

以淡入的方式顯示符合元素

$(&#39;#btn-box3&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).fadeIn()
})

登入後複製

.fadeOut()

以淡出的方式顯示符合元素

$(&#39;#btn-box4&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).fadeOut()
})

登入後複製

.fadeTo()

調整符合元素的透明度，方法透過符合元素的不透明度來做動畫效果

$(&#39;#book&#39;).fadeTo(&#39;slow&#39;, 0.5, function() {  // Animation complete.
});

登入後複製

滑動效果

.slideDown() / .slideUp( )

用滑動動畫顯示一個匹配元素

$(&#39;#btn-box5&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).slideDown()
})

$(&#39;#btn-box6&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).slideUp()
})

登入後複製

回調同步與非同步

如以下案例

回呼同步

即在整個動畫結束之後，出現

'hide'，即為同步

$(&#39;#btn-box1&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).hide(&#39;normal&#39;, funciton(){        console.log(&#39;hide&#39;)
  })
})

登入後複製

非同步

即只要事件觸發瞬間（即按下btn），就出現

'hide'，即為非同步

$(&#39;#btn-box1&#39;).on(&#39;click&#39;,function(){
  $(&#39;.box&#39;).hide(&#39;normal&#39;)   console.log(&#39;hide&#39;)
})

登入後複製

具體參考 demo 案例1 中的案例

$(&#39;#action1&#39;).on(&#39;click&#39;,function(){  var $box = $(&#39;.box&#39;)  //回调地狱写法
  $box.hide(1000, function(){
    $box.show(1000, function(){
      $box.fadeOut(&#39;slow&#39;, function(){
        $box.fadeIn(&#39;slow&#39;, function(){
          $box.slideUp(function(){
            $box.slideDown(function(){              console.log(&#39;动画执行完毕&#39;)
              $(&#39;#wrap1&#39;).text(&#39;动画执行完毕&#39;)
            })
          })
        })
      })
    })
  })
})

$(&#39;#action2&#39;).on(&#39;click&#39;,function(){  var $box = $(&#39;.box&#39;)  //使用jQuery动画队列写法
  $box.hide(1000)
      .show(1000)
      .fadeOut(&#39;slow&#39;)
      .fadeIn(&#39;slow&#39;)
      .slideUp()
      .slideDown(function(){        console.log(&#39;真的执行完毕了&#39;)
        $(&#39;#wrap2&#39;).text(&#39;真的执行完毕了&#39;)  //最后执行同步回调
      })    console.log(&#39;动画完毕了吗？&#39;)  //动画才刚开始，在动画队列创建的时候，就输出这句话，异步
    $(&#39;#wrap2&#39;).text(&#39;动画完毕了吗？&#39;)
})

登入後複製

jQuery 動畫佇列

動畫佇列可以說是動畫執行的一個順序機制，當我們對一個物件加入多次動畫效果時後，新增的動作就會被放入這個動畫佇列中，等前面的動畫完成後再開始執行。

動畫佇列機制與執行順序

#對於一組元素上的動畫效果，有以下兩種情況：

當在一個
animate()方法中應用多個屬性時，動畫是同時發生的。
當以鍊式的寫法應用動畫方法時，動畫是依照順序發生的。

對於多組元素上的動畫效果，有以下情況：

以上是整個動畫的調度一個流程，其實都是利用佇列非同步的空閒然後執行同步的程式碼，這樣在處理上是沒有浪費資源的，而且精確度也是最高的。

自訂動畫

當基礎效果、漸層效果、滑動效果動畫無法滿足需求的時候，jQuery 提供了自訂動畫行為的方法

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

properties

是一個CSS屬性和值的對象，動畫將根據這組對象移動。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$(&#39;#btn4&#39;).click(function(){ $(&#39;.box&#39;).animate({ left: &#39;150px&#39; },1000) .animate({ left: &#39;150px&#39;, top: &#39;150px&#39; },1000) .animate({ left: &#39;0&#39;, top: &#39;150px&#39; },1000) .animate({ left: &#39;0&#39;, top: &#39;0&#39; },1000) })</pre><div class="contentsignin">登入後複製</div></div>.clearQueue()<h3>清除動畫佇列中未執行的動畫</h3> <p>.stop( [clearQueue ] [, jumpToEnd ] )</p> <h3>#停止目前正在運作的動畫</h3>裡面的參數<p><br></p> <ul class=" list-paddingleft-2">clearQueue：也就是<li>.clearQueue()<p>方法，決定是否清楚動畫佇列中未執行的動畫<code>

jumpToEnd：即是決定是否展示當前一幀動畫是否執行到最後

這兩個參數預設都為false即. stop()等同於.stop(false,false)

.stop(false,false)

動畫序列中共有4 個序列，當執行到動畫序列2 的時候使用

.stop()

，序列2 立即停止，並執行動畫序列3 ，執行完之後，執行動畫序列4。

進入

demo

點選 auto 之後，再點選 .stop() 即可檢視效果

.stop(true,false)

動畫序列中共有4 個序列，當執行到動畫序列2 的時候使用

.stop(true,false )

，序列2 立即停止，由於參數 [clearQueue]是 true 因此後面的也動畫序列也全部清空，不會再往下執行動畫序列。因此動畫會停留在動畫序列2 .stop(true,false)的地方。 <p class="image-view"><img src="https://img.php.cn/upload/article/000/000/009/6a0e4a6917d165abf2caec8792bc1b6a-3.png" alt=""></p> <p></p> <p>進入 <a href="https://evenyao.github.io/jQuery-demo/jQuery%20-%20%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%A8%E7%94%BB%20%E4%B8%8E%20%E5%8A%A8%E7%94%BB%E9%98%9F%E5%88%97/jQuery%20-%20%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%A8%E7%94%BB%20%E4%B8%8E%20%E5%8A%A8%E7%94%BB%E9%98%9F%E5%88%97.html" target="_self">demo</a> 點選 auto 之後，再點選 .stop(true,false) 即可檢視效果</p> <h4>#. stop(true,true)</h4> <p>動畫序列中共有4 個序列，執行到動畫序列2 的時候使用<code>.stop(true,true)，由於參數 [clearQueue ]是 true 因此後面的也動畫序列也全部清空，不會再往下執行動畫序列。由於參數 [jumpToEnd]也是 true ，因此最後會停留在動畫序列2 本身應該結束的位置。