<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('button').click(function() {
//自定義動(dòng)畫(huà)
//讓寬度變?yōu)?00
//animate (參數(shù)一,參數(shù)二)
參數(shù)一:是一個(gè)對(duì)象，對(duì)象中包裹的是要產(chǎn)生動(dòng)畫(huà)效果的屬性名以及屬性如果參數(shù)一中添加了多個(gè)屬性,則這些屬性是同時(shí)發(fā)生改變的 (復(fù)雜動(dòng)畫(huà))
如果把參數(shù)一中的多個(gè)屬性拆分到不同的animate方法中添加的話,則在執(zhí)行完上一annmate方法后,才能執(zhí)行下一個(gè)方法，順序執(zhí)行。
參數(shù)二:一個(gè)數(shù)值或關(guān)鍵字字符串，用來(lái)控制時(shí)間
第三個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)動(dòng)畫(huà)執(zhí)行完畢后，會(huì)執(zhí)行回調(diào)函數(shù)，我們一般會(huì)把動(dòng)畫(huà)結(jié)束后的操作放在這個(gè)回調(diào)函數(shù)中
鏈?zhǔn)讲僮? :通過(guò)點(diǎn)語(yǔ)法用來(lái)連接多不操作
$('#div1').animate({width:'500px'},3000).animate({height:'500px'},3000)
$('#div1').animate({
left: '500px',
borderRadius: '50%',
width: '500px',
height: '500px'
}, 3000, function() {
$(this).css({
'background': 'gold'
});
});
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button>點(diǎn)擊產(chǎn)生動(dòng)畫(huà)</button>
</body>
</html>
