jQuery UI API 类别 - 特效核心(Effects Core)
jQuery UI API 类别 - 特效核心(Effects Core)
jQuery UI API 中的 “Special Effects”(特效核心)包含了一些可以让页面产生炫酷效果的方法。下面来具体介绍一下这部分的 API。
animate() 方法
animate() 方法可以用来实现 CSS3 动画效果,并且在各个浏览器中均可运行。示例代码如下:
$("button").click(function(){
$("div").animate({left: '250px'});
});
在这个示例中,当用户点击按钮后,div 元素将会向右移动 250 像素,异步运行的方式使得这个动画更为流畅。
animate() 方法还有一些参数选项,比如可以设置动画时长、动画类型、回调函数等等。
effects 选项
我们可以在使用 animate() 方法时传入一些特效选项,例如 easing、duration、queue、complete。通过设置这些参数,可以让动画效果更为丰富。
- easing
easing 用来设置动画的缓动效果,可以使用默认的“linear”效果,也可以使用 jQuery Easing 插件中的更多效果。
$("button").click(function(){
$("div").animate({left: '250px'}, "slow", "swing");
});
在这个示例中,我们设置了动画时长为“慢速”(”slow“),设置了缓动效果为”swing“。
- duration
用来设置动画的时长,单位为毫秒。
$("button").click(function(){
$("div").animate({left: '250px'}, 2000);
});
在这个示例中,我们设置了动画时长为 2 秒。
- queue
用来设置动画是否要排队执行,默认值为 true。当调用 animate() 方法时,如果该元素正处于一个动画效果中,那么在设置 queue=true 时将会把当前的动画效果加入到一个队列中,待前面的动画执行完毕后再执行。
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
在这个示例中,我们设定了一个 div 元素的四个动画效果,设置了 queue=true。
- complete
用来设置当动画执行完毕时要调用的函数。
$("button").click(function(){
$("div").animate({left: '250px'}, {
duration: 2000,
complete: function() {
alert("Animation finished!");
}
});
});
在这个示例中,我们设置了一个动画效果和一个回调函数,在动画效果结束后会触发这个回调函数。
以上是 jQuery UI API 类别 - 特效核心(Effects Core) 的介绍,这部分的 API 可以让我们轻松实现各种动态效果。