3.6.2 操作动画队列

3.6.2 操作动画队列

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

jQuery对象提供的操作动画队列的方法

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

stop方法

方法	描述
`stop([clearQueue],[gotoEnd])`	停止当前`jQuery`对象里每个`DOM`元素上正在执行的动画。

如果该jQuery对象上绑定了动画队列,且clearQueue没有指定为true,则执行该方法后将立即执行当前动画的下一个动画,
可以对该函数的clearQueue、gotoEnd两个可选的布尔类型的参数进行指定,

其中clearQueue指定是否删除该jQuery对象上的动画队列;
如果将gotoEnd 设置为true,则当前动画立即跳到最后一帧而结束,否则当前动画将停在当前帧而结束。

queue方法

queue有如下几种形式:

方法	描述
`queue([queueName])`	返回当前`jQuery`对象里第一个`DOM`元素上的动画函数队列。
`queue([queueName,] callback)`	将`callback`动画函数添加到当前`jQuery`对象里所有`DOM`元素的动画函数队列的尾部。
`queue([queueName,] newQueue)`	用`newQueue`动画函数队列`代替`当前`jQuery`对象里所有`DOM`元素的动画函数队列。

queueName用于为动画队列指定一个名称,如果省略该参数,jQuery默认使用标准的动画队列名:fx。

dequeue方法

方法	描述
`dequeue()`	执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。
### clearQueue方法 ###

方法	描述
`clearQueue([queueName])`	清空动画函数队列中的所有动画函数。

程序示例

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

<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<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-3.1.1.js">
	</script>
	<p>动画队列的长度是：
		<span></span>
	</p>
	<div></div>
	<script type="text/javascript">
		var $div = $("div");

		function runIt() {
			// 第1个动画：显示出来
			$div.show("slow");
			// 第2个动画：自动动画，水平左移300px,延迟2000毫秒
			$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>

该程序中的粗体字代码为指定<div>元素依次调用了8个动画函数,这意味着jQuery将会把它们添加到动画队列中,然后该元素将会依次执行这个动画队列中的8个动画。每执行完一个动画效果,动画队列的长度减1。

jQuery命名空间下的queue和dequeue方法

除此之外,jQuery命名空间下也提供了jQuery.queue(element[,queueName])、jQuery.dequeue(element [,queueName])两个方法,这两个方法的功能与jQuery对象的queue方法和dequeue方法的功能相同,只是需要为它们传入element参数,用于指定操作哪个元素上的动画队列。

原文链接: 3.6.2 操作动画队列