jQuery中animate()方法用法实例

以下是animate()方法的一些用法示例：
1. 移动元素：
```javascript
$("button").click(function(){
$("#box").animate({left: '250px'});
});
```
这将使id为"box"的元素向右移动250像素。
2. 改变元素的宽度和高度：
```javascript
$("button").click(function(){
$("#box").animate({width: '200px', height: '200px'});
});
```
这将使id为"box"的元素宽度和高度都变为200像素。
3. 链式动画：
```javascript
$("button").click(function(){
$("#box").animate({left: '250px'})
.animate({top: '250px'})
.animate({left: '0px'})
.animate({top: '0px'});
});
```
这将使id为"box"的元素先向右移动250像素，然后向下移动250像素，再向左移动250像素，最后向上移动250像素。
4. 修改CSS属性：
```javascript
$("button").click(function(){
$("#box").animate({backgroundColor: 'blue', color: 'white'});
});
```
这将使id为"box"的元素的背景色变为蓝色，文本颜色变为白色。
5. 动画持续时间和回调函数：
```javascript
$("button").click(function(){
$("#box").animate({left: '250px'}, 1000, function(){
alert("动画完成");
});
});
```
这将使id为"box"的元素向右移动250像素，持续时间为1秒，然后弹出一个提示框。
6. 使用相对值：
```javascript
$("button").click(function(){
$("#box").animate({left: '+=250px'});
});
```
这将使id为"box"的元素向右移动250像素，相对于当前位置。
以上只是animate()方法的一些用法示例，实际上animate()方法可以通过传递不同的属性和选项来实现更丰富的动画效果。