jQuery動畫方法

下面介紹一些使用jQuery實現動畫的方法：

html中有如下代碼：

 
 <button id="btn-box1">show</button>
  <button id="btn-box2">hide</button>
  <button id="btn-box3">fadeIn</button>
  <button id="btn-box4">fadeOut</button>
  <button id="btn-box5">slideDown</button>
  <button id="btn-box6">slideUp</button>
  <button id="action"> 回調</button>
  <div class="container">
    <div class="box">
      hello
    </div>    
  </div>

 

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

每個方法后面都有三個參數，以show來舉例，第一參數是執行這個動畫過程所需要的時間，可以寫對應的毫秒數，比如1000，也可以寫slow,nomral,fast，第二個參數是一個緩動函數，表示均勻變化還是先快后慢或者先慢后快，第三個參數是一個回調函數，表示動畫執行完之后所期待做的事情。也就是.show( [時間 ] [動畫快慢 ] [結束后動作] )

.show()

用於顯示元素，寬高同時逐漸顯示

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

.hide()

用於隱藏元素，寬高同時逐漸隱藏

.slideUp()

像拉窗簾一樣，往上拉。

.slideDown()

與slideUp()相反

.slideToggle()

用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面中，在這個元素下面的內容往下或往上滑。display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值。

.fadeIn()

通過淡入的方式顯示匹配元素，參數含義和上面相同。顏色逐步發生變化

.fadeOut()

通過淡出的方式隱藏匹配元素

 

.animate()

這個方法可是實現自定義動畫，包括上面介紹的所有效果。

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

第1個參數是動畫的最終效果，第二是時間，第三個是過程變化是否均勻，第四個是動畫結束后執行的動作。

這里尤其注意第一個參數，必須是能實現的css效果，比如若在css中給元素設置為block，那么這里設置none是不能執行的；同樣若未給元素css設置為absolute，那么其left: 50px也不能實現。

 $('#clickme').click(function() {
 $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { 
// Animation complete.
 }); 
});

 

 jQuery任務隊列：

隊列的作用就是讓我們把一個又一個的任務放到一起，確保只有當前面的任務完成了，才會開始下一個任務。這里面的任務可以是同步的，也可以是異步的。

stop([clearQueue ] [, jumpToEnd ])

• 參數為空：停止當前動畫，執行動畫隊列中的下一個動畫
• [clearQueue ]：boolean類型，停止當前正在進行的動畫，清空未執行的動畫隊列，影響動畫效果。

[, jumpToEnd ]：boolean類型，停止當前正在進行的動畫，清空未執行的動畫隊列，並直接跳到本次動畫的結束。

    $('#btn6').click(function(){
      //停止當前動畫任務,執行隊列中下一個動畫任務
      $('.box').stop()
    })
    $('#btn7').click(function(){
      //停止當前動畫，並清除未執行的動畫隊列。就直接暫定了。
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      //停止當前動畫，並清除未執行的動畫隊列，並且展示當前執行任務的最終狀態
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      //停止當前動畫，並清除未執行的動畫隊列，並且當前動畫展示最終狀態
      $('.box').finish()
    })
      $('#btn10').click(function(){
      //暫定當前動畫，並直接跳到當前任務的最終狀態，然后接着往下執行，並且當前動畫展示最終狀態
      $('.box').stop(false, true)
    }

.clearQueue

清除動畫隊列中未執行的動畫

.finish

停止當前動畫，並清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態