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"的元素寬度和高度都變?yōu)?00像素。

3. 鏈?zhǔn)絼赢嫞?/li>

$("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"的元素的背景色變?yōu)樗{(lán)色，文本顏色變?yōu)榘咨?/p>

5. 動畫持續(xù)時間和回調(diào)函數(shù)：

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

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

6. 使用相對值：

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

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

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