摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery</title> <script type="text/javascript" src="jq
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'400px',opacity:'0.5'},'slow');
div.animate({width:'400px',opacity:'1'},'slow');
div.animate({height:'200px',opacity:'0.5'},'slow');
div.animate({width:'200px',opacity:'1'},'slow',function(){
var span=$("span");
span.text("PHP中文網(wǎng)");
span.animate({fontSize: '20px',opacity:'0.1'},'show');
span.animate({
lineHeight:'200px',
fontSize:'40px',
opacity:'1'}
,'show');
});
})
})
</script>
</head>
<body>
<button style="width: 200px;height: 50px;border: none">點(diǎn)擊</button>
<div style="width: 200px;height: 200px;background: green;position: absolute;"><span style="position: relative;"></span></div>
</body>
</html>1，JQuery動(dòng)畫(huà)的語(yǔ)法
$("div").animate({params},speed,fn)用animate() 方法創(chuàng)建自定義動(dòng)畫(huà)；
params是需要修改的css屬性；
speed是速度，可以使用'0~1'之間的數(shù)字，或者使用slow，fast;
fn是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)function();
2,JQuery animate操作多個(gè)屬性
var span=$("span") //申明span為$("span")
span.animate({
lineHeight:'200px',
fontSize:'40px',
opacity:'1'}
,'show');大括號(hào){}內(nèi)css屬性，屬性名需要去除-，改-后面首字母為大寫(xiě)字母，每個(gè)屬性需要用,英文逗號(hào)隔開(kāi)
3，JQuery animate的隊(duì)列功能
var div=$("div");//申明
div.animate({height:'400px',opacity:'0.5'},'slow');
div.animate({width:'400px',opacity:'1'},'slow');
div.animate({height:'200px',opacity:'0.5'},'slow');JQuery逐一運(yùn)行調(diào)用animate;
注意：如需對(duì)位置進(jìn)行操作，需要修改css的position屬性為absolute，relative。