使用jQuery创建动画是件非常容易的事情,只需要掌握提供的animate API

# animate API

官网解释 animate api

$(selector).animate({params},[speed],[easing],[fn]);
1
  • params: 一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed: 可以填三种预定速度之一的字符串("slow" 600ms,"normal" 400ms, "fast" 200ms)或者直接填毫秒数值,默认400
  • easing: 要使用的擦除效果的名称(需要插件支持). 默认jQuery提供"linear" 和 "swing".
  • fn: 在动画完成时执行的函数,每个元素执行一次

例子,点击按钮让这个元素偏移一定像素

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 
1
2
3

# slideUp 等二次封装的方法

其中,jQuery还提供了方便的方法,其实是语法糖,对animate方法的二次封装

hide,show分别修改元素的display属性为none和block

slideUp(收缩高度),slideDown(还原高度),本质是随时间修改元素的高度

fadeIn(淡入), fadeOut(淡出),本质是随时间修改元素的opacity属性

详细的例子可以见w3school

jQuery自带效果有限,可以使用 jQuery Easing Plugin 另外jQuery UI 提供了更多的特效,如颤动,心跳,爆炸等

# animate 队列

jQuery的animate还支持队列,逐帧播放

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});
1
2
3
4
5

# loop 循环播放

借助animate API最后一个callback参数,可以轻松实现无尽播放动画的效果。

# 使用场景

  1. 不支持loop
  2. 不支持滚动条滚动播放
上次更新: 7/28/2020, 10:19:38 AM