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 可以让我们轻松实现各种动态效果。