abstrak：自定義動畫animate()語法: $(selector).animate({params},speed,fn)params:必選,設(shè)置css動畫,注意其中 也可以使用預(yù)定義值,如:width:"toggle";speed:可選,設(shè)置動畫時長,值可設(shè)置為"slow","fast"或者毫秒數(shù)(不帶單位); fn:可選動畫
自定義動畫animate()語法:
$(selector).animate({params},speed,fn)params:必選,設(shè)置css動畫,注意其中 也可以使用預(yù)定義值,如:
width:"toggle";
speed:可選,設(shè)置動畫時長,值可設(shè)置為"slow","fast"或者毫秒數(shù)(不帶單位);
fn:可選動畫結(jié)束后執(zhí)行的函數(shù)
有幾點容易出錯的地方:
1-css 樣式要寫在{}內(nèi)部
2-css 屬性需要使用駝峰寫法,多個屬性用,隔開;
3-動畫的三個屬性params,speed,fn之間要用,隔開
4-不能直接用 animate 改變顏色屬性 可以結(jié)合函數(shù)來處理
5-移動元素需要先對元素進(jìn)行定位處理
實例練習(xí):
代碼部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https:code.jquery.com/jquery-3.3.1.js"></script>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$("div").animate({
width: "toggle",
height: "toggle",
borderRadius: "100px",
opacity: 0.3,
fontSize: "100px"
}, 1000, function () {
$("div").css("background", "red")
})
})
$(".btn2").click(function () {
$("div").animate({
left: "200px"
}, 1000, function () {
alert("移動完成")
})
})
})
</script>
<button class="btn1">隱藏/出現(xiàn)</button>
<button class="btn2">移動</button>
<div>hello</div>
</body>
</html>