自定义动画

为了满足动画实现的灵活性，解决单个方法实现动画的单一性，jQuery中提供了animate()方法自定义动画。语法如下所示。

$(selector).animate(params[, speed][, easing][, fn])

上述语法中，params表示想要更改的样式，以对象形式传递，样式名可以不用带引号，但如果样式名中有“-”（如border-left），需要用驼峰命名法（如borderLeft）。其余参数的含义与前面讲过的动画方法相同，可以省略。

下面通过代码演示如何利用animate()方法创建自定义动画。

 1  <style>
 2   div { width: 50px; height: 50px; background-color: pink; }
 3  </style>
 4  <button>动起来</button>
 5  <div></div>
 6  <script>
 7   $("button").click(function() {
 8    $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500);
 9   });
 10 </script>

上述代码中，第4行定义按钮，第5行定义div元素，第7~9行给页面中按钮“动起来”按钮绑定单击事件，当单击鼠标时通过第8行将div元素运动到距离左侧500px，距离顶部300px的位置，透明度为0.4，宽度为500px。