首頁 > 文章 > web前端 > jQuery內建的幾種動畫樣式

jQuery內建的幾種動畫樣式

小云云原創: 2018-01-06 09:08:331927瀏覽

用JavaScript實作動畫，原理非常簡單：我們只需要以固定的時間間隔（例如，0.1秒），每次把DOM元素的CSS樣式修改一點（例如，高寬各增加10%），看起來就像動畫了。

但要用JavaScript手動實作動畫效果，就需要寫非常複雜的程式碼。如果想要把動畫效果用函數封裝起來便於復用，那考慮的事情就更多了。本文主要和大家分享jQuery內建的幾種動畫樣式。

使用jQuery實作動畫，程式碼已經簡單得不能再簡化了：只需要一行程式碼！

讓我們先來看看jQuery內建的幾種動畫樣式：

show / hide

#直接以無參數形式呼叫show()和hide( )，會顯示和隱藏DOM元素。但是，只要傳遞一個時間參數進去，就變成了動畫：

var p = $('#test-show-hide');
p.hide(3000); // 在3秒钟内逐渐消失

時間以毫秒為單位，但也可以是'slow'，'fast'這些字串：

var p = $('#test-show-hide');
p.show('slow'); // 在0.6秒钟内逐渐显示

toggle()方法則依照目前狀態決定是show()還是hide()。

slideUp / slideDown

你可能已經看出來了，show()和hide()是從左上角逐漸展開或收縮的，而slideUp()和slideDown()則是在垂直方向逐漸展開或縮小的。

slideUp()把一個可見的DOM元素收起來，效果跟拉上窗簾似的，slideDown()相反，而slideToggle()則根據元素是否可見來決定下一步動作：

var p = $('#test-slide');
p.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

fadeIn()和fadeOut()的動畫效果是淡入淡出，也就是透過不斷設定DOM元素的opacity屬性來實現，而fadeToggle()則根據元素是否可見來決定下一步動作：

var p = $('#test-fade');
p.fadeOut('slow'); // 在0.6秒内淡出

自訂動畫

如果上述動畫效果還不能滿足你的要求，那就祭獻最後大招：animate()，它可以實現任意動畫效果，我們需要傳入的參數就是DOM元素最終的CSS狀態和時間，jQuery在時間段內不斷調整CSS直到達到我們設定的值：

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

animate()還可以再傳入一個函數，當動畫結束時，該函數將被呼叫：

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000, function () {
  console.log('动画已结束');
  // 恢复至初始状态:
  $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

實際上這個回呼函數參數對於基本動畫也是適用的。

有了animate()，你就可以實現各種自訂動畫效果了：

animate()

序列動畫

jQuery的動畫效果還可以串列執行，透過delay()方法還可以實現暫停，這樣，我們可以實現更複雜的動畫效果，而程式碼卻相當簡單：

var p = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
p.slideDown(2000)
  .delay(1000)
  .animate({
    width: '256px',
    height: '256px'
  }, 2000)
  .delay(1000)
  .animate({
    width: '128px',
    height: '128px'
  }, 2000);
}
</script>

因為動畫需要執行一段時間，所以jQuery必須不斷傳回新的Promise物件才能後續執行操作。簡單地把動畫封裝在函數中是不夠的。

為什麼有的動畫沒有效果

你可能會遇到，有的動畫如slideUp()根本沒有效果。這是因為jQuery動畫的原理是逐漸改變CSS的值，如height從100px逐漸變成0。但是很多不是block性質的DOM元素，對它們設定height根本不起作用，所以動畫也就沒有效果。

此外，jQuery也沒有實現對background-color的動畫效果，用animate()設定background-color也沒有效果。這種情況下可以使用CSS3的transition來實現動畫效果。

jQuery內建的幾種動畫樣式

相關文章