动画效果

jQuery 动画框架的通用特性：

• 动画都有时长，可以用毫秒数或字符串指定，字符串也会被解析为毫秒数，比如 fast 表示 200 ms，slow 表示 600 ms，默认时长是 400 ms，还可以通过 jQuery.fx.speeds 自定义时长字符串。
• 动画效果可以通过jQuery.fx.off = true 关闭
• jQuery 动画是异步的，支持传入回调函数在动画完成时调用
• jQuery 动画方法接收可选的时间和回调参数，还可以传入一个对象来调用动画方法，用于设置高级选项

$('#message').fadeIn({
    duration: "fast",
    complete: function() { $(this).text("Hello World"); }
});

简单动画

jQuery 定义了9个简单的动画方法来隐藏和显示元素：

• fadeIn()、fadeOut()、fadeTo()：fadeIn() 和 fadeOut() 通过改变 CSS 的 opacity 属性来显示或隐藏元素，fadeTo() 稍有不同，需要传入一个 opacity 目标值
• show()、hide()、toggle()：上面的三个方法即使元素不可见，依然会保留在文档布局中的占位，hide() 则是彻底移除，就好像将 display 属性设置为 none 一样
• slideDown()、slideUp()、slideToggle()：也是控制元素隐藏或显式，只不过方式是上下高度的动态变化

示例：

// 淡出、显示、向上滑出、向下滑动
$("img").fadeOut().show(300).slideUp().slideToggle();

由于动画是队列化的，所以上面的动画会依次执行。

自定义动画

与简单动画相比，使用 animate() 可以实现更多动画效果。传给 animate() 方法的第一个参数是指定动画内容，剩余参数指定如何定制动画，第一个参数说必需的：

$("#sprite").animate({
    opacity: .25,                // 透明度调整为0.25
    font-size: 10                // 字体大小修改为10像素
}, {
    ?duration: 500,              // 动画持续半秒
    complete: function () {      // 在动画完成时调用该函数
        this.text("Goodbye");    // 改变元素的文本
    }
});

动画属性对象

animate() 方法第一个参数是对象，该动画对象属性名必须是 CSS 属性名，这些属性值是动画的目标值，只支持数值属性。除了指定绝对值，还可以指定相对值：

$("p").animate({
    "margin-left": "+=.5in",
    "opacity": "-=.1"
});

此外属性值还支持三个特殊值：hide、show 和 toggle。

动画选项对象

animate() 方法第二个参数是可选的，该选项对象用来指定动画如何执行，比较重要的几个选项有：

• duration：动画持续的毫秒时间
• complete：动画完成时回调函数
• step：动画每一帧调用的回调函数
• queue：动画是否需要队列化

实现动画时，时间和动画属性值之间默认是线性关系，但是往往非线性的动画效果体验更好，因此 jQuery 引入了「缓动函数」，将基于时间的完成百分比映射到动画效果的百分比。jQuery 的默认缓动函数时正弦函数，开始和结束慢，中间快，对应函数名是 swing，jQuery 还实现了线性缓动函数 linear。你也可以添加自定义缓动函数到 jQuery.easing 对象上：

jQuery.easing["squareroot"] = Math.sqrt;

选项对象的其他选项都和缓动函数有关：

• easing：指定缓动函数名，默认是 swing

jQuery 对象还允许为不同的 CSS 动画属性指定不同的缓动函数：

// 实现方式一：使用 specialEasing 来指定自定义缓动函数
$("img").animate({ width: "hide", height: "hide", opacity: "hide"}, 
    ?{ specialEasing: { width: "linear", height: "linear" }});
    
// 实现方式二：在第一个对象中传入[目标值,缓动函数]数组
$("img").animate({ 
    width: ["hide", "linear"], height: ["hide", "linear"], opacity: "hide"});

动画的取消、延迟和队列

jQuery 还定义了一些动画和队列相关的方法：

• stop() 方法用于停止选中元素上当前正在执行的任何动画
• delay() 方法用于添加延迟时间到动画队列中
• queue() 方法用于给动画队列添加一个新函数

动画方法使用的默认队列名是「fx」。利用 jQuery 队列实现顺序执行异步操作非常方便。