jQuery中animate()方法用法實例

以下是animate()方法的一些用法示例：

1. 移動元素：

$("button").click(function(){
$("#box").animate({left: '250px'});
});

這將使id為"box"的元素向右移動250像素。

2. 改變元素的寬度和高度：

$("button").click(function(){
$("#box").animate({width: '200px', height: '200px'});
});

這將使id為"box"的元素寬度和高度都變為200像素。

3. 鏈式動畫：

$("button").click(function(){
$("#box").animate({left: '250px'})
.animate({top: '250px'})
.animate({left: '0px'})
.animate({top: '0px'});
});

這將使id為"box"的元素先向右移動250像素，然后向下移動250像素，再向左移動250像素，最后向上移動250像素。

4. 修改CSS屬性：

$("button").click(function(){
$("#box").animate({backgroundColor: 'blue', color: 'white'});
});

這將使id為"box"的元素的背景色變為藍色，文本顏色變為白色。

5. 動畫持續時間和回調函數：

$("button").click(function(){
$("#box").animate({left: '250px'}, 1000, function(){
alert("動畫完成");
});
});

這將使id為"box"的元素向右移動250像素，持續時間為1秒，然后彈出一個提示框。

6. 使用相對值：

$("button").click(function(){
$("#box").animate({left: '+=250px'});
});

這將使id為"box"的元素向右移動250像素，相對于當前位置。

以上只是animate()方法的一些用法示例，實際上animate()方法可以通過傳遞不同的屬性和選項來實現更豐富的動畫效果。