为了方便开发者进行效果的扩张,在jQuery里面提供有animate()函数,这个函数的最大特点是可以直接接收
css样式,然后形成最终效果

观察原生函数

<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的动画函数</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
		//为id为"mydiv的元素设置动画,宽度变为300px,动画时长为2秒
			$("#myDiv").animate({width:"300px"},2000);
		});
			
	</script>
</head>
<body>
	<div id="myDiv" style="width:0px;border:1px solid red">
		www.maoshu.com
	</div>
</body>
</html>

除了这种可以实现简单的样式切换效果之外,也可以进行一个图片的移位效果

<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的动画函数</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
		//将mydiv的元素向左移动800px
			$("#myDiv").animate({left:"800px"},2000);
		});
			
	</script>
</head>
<body>
	<div id="myDiv" style="position:absolute">
		<img src="images/gd-a.jpg"  width="300px"/>
	</div>
</body>
</html>

但是现在也可以适当的实现一些透明化的处理

	$(function(){
		//将mydiv的元素向左移动800px,并渐渐变得透明化
			$("#myDiv").animate({left:"800px",opacity:0.1},2000);
		});

也可以实现抓不到游戏

<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的动画函数</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">

		$(function(){
			var option = "800px";
			$("#myDiv").on("mouseover",function(){
				$("#myDiv").animate({left:option,opacity:1},50);
				if(option == "800px"){
					option = "10px"
				}else{
					option="800px";
				}
			});
			
			
		});
			
	</script>
</head>
<body>
	<div id="myDiv" style="position:absolute">
		<img src="images/gd-a.jpg"  width="300px"/>
	</div>
</body>
</html>

animate()操作完全是给美工设计人员留有设计接口,设计人员只需要掌握css技术既可以轻松实现这种设计模式

jQuery元原生动画函数

观察原生函数

猜你喜欢