码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作动画队列

时间:2016-05-13 04:21:40      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

1.前言

当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。

jQuery提供了以下几种方法来操作动画队列。

1)        stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。

2)        queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。

3)        queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。

4)        dequeue():执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。

5)        clearQueue([queueName]):清空动画函数队列中的所有动画函数。

2.例子

下面的程序代码示范了访问默认动画队列的属性:

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 动画队列 </title>
	<style>
	div {
		width: 60px; 
		height: 60px;
		position:absolute;
		top:60px; 
		background: #f0f;
		display:none;
	}
	</style>
</head>
<body>
	<script type="text/javascript" src="../jquery-1.8.0.js">
	</script>
	<p>动画队列的长度是:<span></span></p>
	<div></div>
	<script type="text/javascript">
	var div = $("div");
	function runIt()
	{
		// 第1个动画:显示出来
		div.show("slow");
		// 第2个动画:自动动画,水平左移300px
		div.animate({left:'+=300'},2000);
		// 第3个动画:卷起来
		div.slideToggle(1000);
		// 第4个动画:放下来
		div.slideToggle("fast");
		// 第5个动画:自动动画,水平右移300px
		div.animate({left:'-=300'},1500);
		// 第6个动画:隐藏出来
		div.hide("slow");
		// 第7个动画:显示出来
		div.show(1200);
		// 第8个动画:卷起来,动画完成后回调runIt
		div.slideUp("normal", runIt);
	}
	// 控制每0.1秒调用一次该方法,该方法用于显示动画队列的长度
	function showIt()
	{
		var n = div.queue();
		$("span").text(n.length);
		setTimeout(showIt, 100);
	}
	runIt();
	showIt();
	</script>
</body>
</html>

3.执行结果

技术分享


jQuery操作动画队列

标签:

原文地址:http://blog.csdn.net/owen_william/article/details/51339850

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!