css动画

最新推荐文章于 2023-04-20 15:39:11 发布

要你看

最新推荐文章于 2023-04-20 15:39:11 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/Chenkai_19960607/article/details/78481469

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<!--
	1.4.1 显示与隐藏
	normal slow fast
	1.4.2 淡入淡出

	1.4.3 自定义动画------《
	animate
	$("#block").animate({
	width: "90%",
	height: "100%",
	fontSize: "10em",
	borderWidth: 10
	}, 1000 );

	1.4.4 动画停止与延时
	stop([cle],[jum])1.7*
	delay(duration,[queueName])
	-->
	</head>
	<body>

	<img src="img/a1.jpg" id="img0" style="position: relative;"/>
	<input type="button" id="show" value="显示" />
	<input type="button" id="hide" value="隐藏" />
	<hr />
	<input type="button" id="dr" value="淡入" />
	<input type="button" id="dc" value="淡出" /><BR>
	<input type="button" id="zdy" value="自定义动画" />
	<script type="text/javascript">
	$("#show").click(function(){

	$("#img0").show(3000);

	});

	$("#hide").click(function(){

	$("#img0").hide(3000);

	});

	//-------------------
	$("#dr").click(function(){

	$("#img0").fadeIn(2000);

	});

	$("#dc").click(function(){

	$("#img0").fadeOut(2000);

	});
	//-----------------------
	$("#zdy").click(function(){

	$("#img0").animate({
	left: "90%",
	}, 1000 );

	});

	</script>
	</body>
	</html>