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