亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

JQuery的動(dòng)畫

??? 2018-11-23 22:17:50 262
????：<!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)畫的語法

$("div").animate({params},speed,fn)

用animate() 方法創(chuàng)建自定義動(dòng)畫；

params是需要修改的css屬性；

speed是速度，可以使用'0~1'之間的數(shù)字，或者使用slow，fast;

fn是動(dòng)畫完成后所執(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屬性，屬性名需要去除-，改-后面首字母為大寫字母，每個(gè)屬性需要用,英文逗號(hào)隔開

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。

??? ??

?? ??