JQuery的动画_php.cn手记

abstract：<!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中文网");
						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">点击</button>
<div style="width: 200px;height: 200px;background: green;position: absolute;"><span style="position: relative;"></span></div>
</body>
</html>

1，JQuery动画的语法

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

用animate() 方法创建自定义动画；

params是需要修改的css属性；

speed是速度，可以使用'0~1'之间的数字，或者使用slow，fast;

fn是动画完成后所执行的函数function();

2,JQuery animate操作多个属性

var span=$("span") //申明span为$("span")
span.animate({
	lineHeight:'200px',
	fontSize:'40px',
	opacity:'1'}
	,'show');

大括号{}内css属性，属性名需要去除-，改-后面首字母为大写字母，每个属性需要用,英文逗号隔开

3，JQuery animate的队列功能

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逐一运行调用animate;

注意：如需对位置进行操作，需要修改css的position属性为absolute，relative。

JQuery的动画

Popular Entries