我們可以通過 jQuery 中的 animate() 方法來創(chuàng)建自定義動(dòng)畫。
animate()方法
animate() 方法用于創(chuàng)建自定義動(dòng)畫。
語法如下：
$(selector).animate({params}, speed, easing, callback);
-
params：必需參數(shù)，定義要設(shè)置動(dòng)畫的CSS屬性。 -
speed：可選參數(shù)，指定效果的持續(xù)時(shí)間，可選值有slow、fast、毫秒。 -
easing：可選參數(shù)，規(guī)定在不同的動(dòng)畫點(diǎn)中設(shè)置動(dòng)畫速度的easing函數(shù)。內(nèi)置的easing函數(shù)有swing、linear。 -
callback：可選參數(shù)，是動(dòng)畫完成后要執(zhí)行的函數(shù)。
默認(rèn)情況下，所有 HTML 元素都有一個(gè)靜態(tài)位置，且無法移動(dòng)。如果要對(duì)位置進(jìn)行操作，需要先將元素的 position 屬性設(shè)置為 relative、fixed 、absolute。
示例：
我們來看一下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({left:'300px'});
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>開始動(dòng)畫</button></p>
</body>
</html>
在這個(gè)例子中，有一個(gè)大的矩形框，我們要實(shí)現(xiàn)的效果為點(diǎn)擊按鈕，讓粉色正方形向右移動(dòng)。需要注意的是，我們必須給要移動(dòng)的元素設(shè)置 position 屬性，否則 animate() 方法不起作用。而花括號(hào) {} 中的就是 CSS 屬性，animate() 方法中幾乎可以操作所有 CSS 屬性。但是在使用時(shí)必須注意，要使用 Camel 標(biāo)記法書寫所有的屬性名，例如 padding-left 使用 paddingLeft ，padding-right 使用 paddingRight 等。
我們來看一下上述代碼在瀏覽器中的演示效果：
操作多個(gè)屬性
我們可以為一個(gè)動(dòng)畫設(shè)置多個(gè)屬性，各個(gè)屬性之間通過逗號(hào)隔開。例如設(shè)置動(dòng)畫移動(dòng)后的距離，透明度，寬度和高度。
示例：
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '20px',
width: '20px'
}, 2000);
});
});
在瀏覽器中的演示效果：
使用相對(duì)值
我們?cè)诮o動(dòng)畫設(shè)置 CSS 屬性的時(shí)候可以使用相對(duì)值，相對(duì)值就是相當(dāng)于元素當(dāng)前值，在值的前面加上 += 或 -= 符號(hào)。
示例：
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '-=50px',
width: '+=100px'
}, 2000);
});
});
在瀏覽器中的演示效果：
使用預(yù)先定義的值
我們可以將屬性的動(dòng)畫值指定為 show，hide 或 toggle 。
示例：
show 表示顯示，hide 表示隱藏，toggle 表示切換顯示與隱藏：
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
height: 'toggle',
width: 'toggle',
}, 2000);
});
});
在瀏覽器中的演示效果：
使用隊(duì)列功能
默認(rèn)情況下，jQuery 提供針對(duì)動(dòng)畫的隊(duì)列功能。這也就意味著如果在彼此之后編寫多個(gè) animate() 方法調(diào)用，jQuery 將使用這些方法調(diào)用創(chuàng)建一個(gè)“內(nèi)部”隊(duì)列，然后它逐一運(yùn)行 animate 調(diào)用。
示例：
$(function(){
$("button").click(function(){
var rect = $(".rect");
rect.animate({left:'300px', width:'300px', opacity:'0.8'}, 2000);
rect.animate({height:'10px', opacity:'0.5'}, "slow");
rect.animate({width:'100px', height:'100px', opacity:'1'}, 2000);
});
});
在瀏覽器中的演示效果：
stop()方法
stop() 方法用于在動(dòng)畫或效果完成前對(duì)它們進(jìn)行停止。它適用于所有的 jQuery 效果函數(shù)，包括滑動(dòng)，淡入淡出和自定義動(dòng)畫。
語法如下：
$(selector).stop(stopAll,goToEnd);
-
stopAll：可選參數(shù)，指定是否應(yīng)該清除動(dòng)畫隊(duì)列，默認(rèn)值為false，即只會(huì)停止活動(dòng)的動(dòng)畫，后續(xù)隊(duì)列動(dòng)畫仍繼續(xù)執(zhí)行。 -
gotoend：可選參數(shù)，指定是否立即完成當(dāng)前動(dòng)畫，默認(rèn)值為false。
示例：
點(diǎn)擊按鈕開始動(dòng)畫，點(diǎn)擊粉色正方形停止動(dòng)畫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
width: '300px',
}, 3000);
});
$(".rect").click(function(){
$(this).stop();
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>點(diǎn)擊按鈕開始動(dòng)畫</button></p>
</body>
</html>
在瀏覽器中的演示效果：
