在今天之前，我对jQuery的中的animate()方法还停留在最常见的用法，查了一下手册，发现在1.8的时候增加了几个比较有用的回调函数，想着就来总结下jQuery中animate的几种用法与注意事项，方便自己或者大家有需要的时候参考借鉴，下面来一起看看吧。
jQuery中的`animate()`方法是用于创建平滑的动画效果的核心函数。它允许开发者自定义CSS样式的变化，并在指定的时间内逐步应用这些变化。在本文中，我们将深入探讨`animate()`的多种用法以及一些需要注意的事项。
### 一、animate()的语法结构
`animate()`方法的基本语法如下：
```javascript
$(selector).animate(params, duration, callback)
```
- `params`: 一个对象，包含了要改变的CSS属性和它们的目标值，如 `{left: '100px', opacity: '0.5'}`。
- `duration`: 动画持续的时间，可以是数字（毫秒）或预设的字符串（如 'slow', 'fast'）。
- `callback`: 可选的回调函数，当动画完成时会被调用。
### 二、自定义简单动画
一个基础的例子是让元素水平移动。假设我们有一个id为"cube"的div，点击后会向右移动：
```html
<style>
#cube {
position: relative;
width: 30px;
height: 30px;
background: red;
cursor: pointer;
}
</style>
<body>
<div>
<div id="cube"></div>
</div>
<script>
$(function() {
$("#cube").click(function() {
$(this).animate({ left: "100px" }, 2000);
});
});
</script>
```
### 三、累加与累减动画
除了设置具体的值，还可以使用`+=`或`-=`操作符来累加或累减当前值，例如：`{left: "+=25px"}`会使元素向右移动25像素。
### 四、多重动画
可以同时执行多个动画，只需在`animate()`中指定多个CSS属性，如：
```javascript
$(this).animate({ left: "+=25px", height: "+=20px" }, 1000);
```
### 五、按顺序执行动画
若要按顺序执行动画，可以将`animate()`方法链式调用，如：
```javascript
$(this).animate({ left: "+=25px" }, 500)
.animate({ height: "+=20px" }, 500);
```
### 六、综合示例
可以组合多种动画效果，比如移动、缩放、改变透明度等，所有效果会在指定的顺序执行：
```javascript
$("#cube").click(function() {
$(this).animate({
left: "100px",
height: "100px",
opacity: "1"
}, 500)
.animate({
top: "40px",
width: "100px"
}, 500)
.fadeOut('slow');
});
```
### 七、动画回调函数
回调函数在动画完成时执行，这对于在特定时间点执行非动画操作非常有用。例如，要在动画结束后改变元素样式：
```javascript
$("#cube").click(function() {
$(this).animate({
left: "100px",
height: "100px",
opacity: "1"
}, 500)
.animate({
top: "40px",
width: "100px"
}, 500, function() {
$(this).css("border", "5px solid blue");
});
});
```
回调函数确保了`css()`方法在动画完成后才执行，避免了顺序问题。
总结，`animate()`方法提供了极大的灵活性，可以创建丰富的用户交互效果。注意其用法包括设置CSS属性、指定动画时长、链式调用来安排动画顺序，以及使用回调函数来控制动画结束后的操作。理解并熟练运用这些知识点，将有助于提升jQuery动画效果的实现能力。
