动画效果


Animate-in-JQuery-1-copy.jpg

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"
});

此外属性值还支持三个特殊值:hideshowtoggle

动画选项对象

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 队列实现顺序执行异步操作非常方便。


Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 使用 jQuery 处理事件

>> 下一篇: jQuery 中的 Ajax