当前位置: 首页 > 中文手册 > jQuery.stop() 函数详解

jQuery.stop() 函数详解

stop()函数用于停止当前匹配元素上正在运行的动画

默认情况下,stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画,如果当前正在执行的动画是A,则只会停止动画A的执行,不会阻止动画B和C的执行。当然,你也可以通过指定可选的选项参数来停止所有的动画。

停止动画并不是恢复到该动画执行前的状况,而是直接停止,当前动画执行到什么状态,就停留在什么状态。例如:执行一个元素高度从100px到200px的过渡动画,当高度为150px时停止了该动画,则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数,则不会执行该回调函数。

该函数属于jQuery对象(实例)。

语法

jQuery 1.2 新增该函数。

jQueryObject.stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] )

参数

参数描述
queueName可选/String类型需要停止动画的队列名称,默认为"fx"。
clearQueue可选/Boolean类型是否清空队列中的所有动画,默认值为false
jumpToEnd可选/Boolean类型指示是否直接完成当前动画,默认值为false

jQuery 1.7 新增支持:参数queueName。如果没有指定,则默认为"fx",表示jQuery标准的效果队列。

如果参数jumpToEndtrue,则不再缓慢执行当前动画,而是直接完成。此时,元素将会保持动画执行完毕后的状态。

返回值

stop()函数的返回值为jQuery类型,返回当前jQuery对象本身。

示例&说明

除了以下提到的值外,所有动画css属性都应该可以变化为一个单一的数值。使用基本的jQuery功能,大多数非数值的css属性都无法用来执行动画。例如:width、height、left、top都可用于动画,但color、background-color无法用于动画(除非使用jQuery.Color()插件)。除非你为属性值指定了单位(例如:px、em、%),否则默认的数值单位为像素(px)。

速写的css属性可能无法获得完整全面的支持,例如:border、margin等,因此不推荐使用。

你还可以将css属性值设为一些特定的字符串,例如:"show"、"hide"、"toggle",则jQuery会调用该属性默认的动画形式。

此外,css属性值也可以是相对的,你可以为属性值加上前缀"+="或"-=",以便于在原来的属性值上增加或减少指定的数值。例如:{ "height": "+=100px" },表示在原有高度的基础上增加100px。

请参考下面这段初始HTML代码:

<p>
停止效果:
<select id="animation">
	<option value="1">停止1</option>
	<option value="2">停止2</option>
	<option value="3">停止3</option>
	<option value="4">停止4</option>
</select>
<input id="exec" type="button" value="执行动画" />
<input id="stop" type="button" value="停止动画" />
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>

以下是与stop()函数相关的jQuery示例代码,以演示stop()函数的具体用法:

$("#exec").click( function(){
	var $myDiv = $("#myDiv");
	// 在现有高度的基础上增加300px (如果原来是100px,增加后就是400px)
	$myDiv.animate( { height: "+=300px" }, 2000 ); 
	$myDiv.animate( { width: "50%" }, 1000 );		
	$myDiv.animate( { width: "200px", height: "100px" }, 1000 );		
} );

$("#stop").click( function(){
	var v = $("#animation").val();
	var $myDiv = $("#myDiv");
	if(v == "1"){
		$myDiv.stop( ); // 停止当前动画,不清空队列
	}else if(v == "2"){
		$myDiv.stop( true ); // 停止当前动画,清空队列(停止全部)
	}else if(v == "3"){
		$myDiv.stop( "fx", true ); // 等同于"2"
	}else if(v == "4"){
		$myDiv.stop( true, true ); // 清空队列,直接完成当前动画
	}
} );

运行代码

43 6
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。