jQuery整理笔记六----jQuery动画

浏览数：11 / 时间：2015年06月09日

1、最简单的动画：显隐效果

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。

具体说明如下：

visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。

display 隐藏后，隐藏的元素不再占用文档的位置。

注：这块比较巧，这个样式属性正好帮了我一个忙，事情是这样的：

在这个页面中有设备类型的列表框和抓包网口的多选框，要求选择设备类型选择千兆的时候显示4个抓包网口，选择万兆的时候隐藏掉eth3和eth4两个网口。

我当时第一做法就是把eth3和eth4用span元素包裹，然后选择万兆的时候触发事件让span执行hide()方法。这样就把后两个网口隐藏了，但是有一个问题，当hide()后，页面结

构变乱了，测试部又说不能用disabled="disabled"只读属性代替，正想找个时间让美工帮调一下。晚上看会书就看到了visibility 这个样式属性，正好就用上了。

在jQuery中定义了show()和hide()两种方法进行元素的索引。其实这俩方法内部就是对元素的display样式进行操作。

show()和hide()方法还可以设置参数，第一个参数代表(隐藏)的速度,参数值越小越快(可以是具体的值，如1000代表1000ms,也可以是预定义的字符串：slow、normal、st，分

别代表600 400 和200)，第二个参数也是一个可选参数,表示在动画演示完毕要调用的回调函数。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> show和hide </title>
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  <!--
		$(function(){
			var t=false;
			$("input").click(function(){
				if(t){
					$("div").show(1000,function(){
						$("input").val(‘隐藏元素‘);
					})
					t=false;
				}
				else{
					$("div").hide(1000,function(){
						$("input").val(‘显示元素‘);
					})
					t=true;
				}
			})
		})
  //-->
  </script>
 </head>
 <body >
	<input type="button" value="隐藏元素" >
	<div id="" class=""><h1>div元素</h1></div>
 </body>
</html>

再看个不带回调函数的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().hide(600);
	},function(){
	     $(this).next().show(600);
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">三国杀杀天下</h5>
	<div class="content">
		夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情
	</div>
</div>
</body>
</html>

2、淡入淡出

fadeIn()和fadeOut()方法，这两个方法是在一定时间内改变元素的不透明度，直到元素完全消失(或者出现)，语法与show()和hide()相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().fadeOut(1000,function(){
			alert(‘回调函数‘)
		 });
	},function(){
	     $(this).next().fadeIn(1000);
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">三国杀杀天下</h5>
	<div class="content">
		夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情
	</div>
</div>
</body>
</html>

3、伸缩

slideUp()和slideDown()方法用法与上两组函数相同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().slideUp(1000,function(){
			alert(‘回调函数‘);
		 });
	},function(){
	     $(this).next().slideDown();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">三国杀杀天下</h5>
	<div class="content">
		夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情
	</div>
</div>
</body>
</html>

4、自定义动画方法

animate(params,speed,callback)

参数说明：

params：一个包含样式属性及值的映射

sleep：速度参数，可选

callback：在动画完成时执行的函数

(1)、一个最简单的自定义动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
	   $(this).animate({left: "500px"}, 3000);
	})
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

注意：为了使这个元素动起来，要更改元素的left属性。需要注意的是要使用animate()方法之前，为了能影响元素的‘left‘ ‘right‘ ‘top‘ ‘bottom‘样式属性，必须先把元素的position

属性设置成‘relative‘或者‘sbsolude‘。

(2)、累加累减动画

上个例子当中,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:"500px"改成left:"+=500px"或者left:"-=500px"即可。

$(function(){
    $("#panel").click(function(){
	   $(this).animate({left: "+=500px"}, 3000);
	})
})

(3)、多重动画

A、同时执行多个动画

上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

$(function(){
    $("#panel").click(function(){
	   $(this).animate({left: "500px",height:"200px"}, 3000);
	})
})

B、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

$(function(){
    $("#panel").click(function(){
	   $(this).animate({left: "500px"},3000)
			  .animate({height:"200px"},1000);
	})
})

(4)、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这

些效果后让它以淡出的方式隐藏掉。

$(function(){
	$("#panel").css("opacity",0.5);//设置不透明度
    $("#panel").click(function(){
	   $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
			  .animate({top:"200px",width:"200px"},3000)
			  .fadeOut(1000);
	})
})

(5)、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

$(function(){
	$("#panel").css("opacity",0.5);//设置不透明度
    $("#panel").click(function(){
	   $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
			  .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});
			  
	})
})

这样就把css方法加入到动画队列中了。

5、停止动画和判断是否处于动画状态

(1)、停止元素的动画

stop([clearQueue][,gotoEnd]) 两个都是可选参数，都是boolean类型

参数说明：

clearQueue：代表是否清空未执行完的动画队列

gotoEnd ：代表是否将正在执行的动画跳到末状态

通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}
.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}
</style>
<script src="../../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	  $("button:eq(0)").click(function () {
		  $("#panel")
			.animate({height : "150" } , 2000 )
			.animate({width : "300" } , 2000 )
			.hide(3000)
			.animate({height : "show" , width : "show" , opacity : "show" } , 2000 )
			.animate({height : "500"} , 2000 );
	  });
	  $("button:eq(1)").click(function () {
		  $("#panel").stop();//停止当前动画，继续下一个动画
	  });
	  $("button:eq(2)").click(function () {
		  $("#panel").stop(true);//清除元素的所有动画
	  });
	  $("button:eq(3)").click(function () {
		  $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画
	  });
	  $("button:eq(4)").click(function () {
		  $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态 
	  });

})
</script>
</head>
<body>
 <button>开始一连串动画</button>
 <button>stop()</button>
 <button>stop(true)</button>
 <button>stop(false,true)</button>
 <button>stop(true,true)</button>
<div id="panel">
	<h5 class="head">三国杀杀天下</h5>
	<div class="content">
		夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情
	</div>
</div>
</body>
</html>

(2)、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。

用法：

if(!$(element).is(":animated")){
	//添加新的动画
}

6、其他动画方法

除了上面提到的动画方法，jquery中还有3个专门用于交互的动画方法

toggle(speed[,callback]) 切换元素可见状态，用来代替hide()和show()的。

slideToggle(speed[,callback])通过调整元素高度来切换可见状态，代替slideUp和slideDown的。

fadeTo(speed,opacity[,callback])将元素的不透明度渐变的调整到某一值。

jQuery整理笔记六----jQuery动画,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery整理笔记六----jQuery动画

jQuery整理笔记六----jQuery动画

相关文章

随机文章

您可能还喜欢

您可能还喜欢

最新图文

您可能还喜欢

您可能还喜欢

文摘排行

文章排行

推荐文章

图文排行

推荐图文