当前日期:2019年12月07日 星期六
Hi 你好,欢迎访问!登录
搜索 导航

豆芽笔记-电商运营、电商基础知识的独立个人博客!

当前位置:首页 - 学习进阶 - WEB前端 - 正文
阅读模式

对jQuery stop()方法理解的一点记录

2018-09-02 | WEB前端 | 欧阳七仔 | 456°c

  教材的文字一般都是极其精练,但是往往又是晦涩的。每个读者、学生的悟性不同,导致了接收程度快慢也不同。

  七仔就是属于那种理解力慢半拍的人,看一个定理或者是说明,总是要比理解反应迅速的同学慢一些。天资不可比,没法子。

  同时也深信一个道理:

  只是看明白,不如自己会做(动手操作一遍);

  自己会做,不如自己把整个过程写出来;

  自己写出来,不如把道理讲给不明白的同学,让其也明白;

  教材上,w3school上,菜鸟教程上,都介绍得相当清楚了,理解能力强一些的同学,早就明白了。写出来只是想达到一个目的,理清一下自己的思路。

jQuery stop()方法语法结构:

$(selector).stop(stopAll,gotoEnd);

  选择器,加方法的搭配结构;两个参数作为辅助,恰恰就是这两个参数的理解比较费事。

  教参上的说明解释:

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

  下面是七仔自己对这几句话的一些简单理解:(已经看明白的同学,可以关掉页面左转了)

测试代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>stop事件(带参数)</title>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#start").click(function(){
				$("div").animate({left:"200px"},5000);
				$("div").animate({fontSize:"3em"},5000);
				$("div").animate({bottom:"100px"},5000);
			});
			$("#stop").click(function(){
				$("div").stop();
			});
			$("#stopAll").click(function(){
				$("div").stop(true,false);
			})
			$("#stopAndToEnd").click(function(){
				$("div").stop(true,true);
			});
		});
	</script>
	<style type="text/css">
		div{
			width: 150px;
			height: 100px;
			background-color: green;
			position: absolute;
		}
	</style>
</head>
<body>
	<p>语法:$(selector).stop(stopAll,gotoEnd)</p>
	<p>参数默认值为false</p>
	<button id="start">开始</button><br /><br />
	<button id="stop">停止stop()</button>
	<p>停止当前动画,后续未完成动画序列依次完成。</p>
	<button id="stopAll">停止stop(true)</button>
	<p>停止全部动画。</p>
	<button id="stopAndToEnd">停止stop(true,true)</button>
	<p>停止正在执行的动画,并快速完成该动作。将其他未完成动作清除。</p>
	<div>hello</div>
</body>
</html>

1、$(selector).stop();

  停止当前动画,当前动画以后未执行的动画,会依次执行

  ①只有一个动画的,则相当于全部停止;

  ②上例中,待点击停止按钮时刻后未执行动画执行完成后,点击“开始”按钮,仍会将整个动画中未执行部分(点击“停止”被忽略执行的当前动画中的剩余部分)继续执行

2、$(selector).stop(true);

  ①第二个参数值为默认值,相当于$(selector).stop(true,false);

  ②调用的时候,则会停止当前执行动画,未执行动画亦停止执行

  ③上述测试案例中,点击“开始”按钮,动画仍旧沿着停止时候的状态依次执行

3、$(selector).stop(true,true);

  立即完成当前动画

  未执行的动画,将不再执行(上述案例中点击“开始”菜单,也不执行);

版权声明

凡注明为豆芽笔记原创文章,转载请注明出处,谢谢合作!如果文章中图片、文字侵犯到您的权益,请留言联系博主进行处理或者删除!

分享:
如果您觉得这篇文章对您有帮助,请分享到朋友圈或者添加到收藏夹哦!
QR:  对jQuery stop()方法理解的一点记录

扫一扫,用手机打开吧

TAGS:未定义标签

共3条评论

jues  2018-09-10 13:10:06 @Ta

网站做不错,文章也不错,真心佩服会做前端的人。

jues博客  2019-08-14 17:38:10 @Ta

好久没来了,路过看看...

欧阳七仔 [楼主] 2019-08-20 11:42:23 @Ta

@jues博客:欢迎常来啊,豆芽笔记欢迎你!

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

用户登录×
用户名:
密    码: