理解jQuery stop()方法


Posted in Javascript onNovember 21, 2014

作为前端开发人员,JS和JQuery是我们经常用到的开发语言和工具类库。我们都晓得,在jQuery中有一个很强大的方法——stop(),他是阻止在连续动画或事件中出现重复累积状况的方法。那么,stop()怎么用呢?来带大家先认识一下stop()吧:

stop()在语法上有两个参数,分别都是Boolean布尔值。且都是可选的,但是也有规定,如下:

$(selector).stop(stopAll,goToEnd)

参数:(默认情况下,不写参数,则会被认为两个参数都是false。)

stopAll:可选。规定是否停止被选元素的所有加入队列的动画。意思就是如果该参数值为true,则会停止所有后续动画或事件。如果该参数值为false,则只停止被选元素当前执行的动画,后续动画不受影响。因此,该参数一般都为false。

goToEnd:可选。规定是否允许完成当前动画,该参数只能在设置了stopAll参数时使用。上面我们说了,stopAll参数我们一般都会写fasle值,不是默认,而是真实的写上该参数。那么goToEnd参数就有两个选择了,一个是false,一个是true。其中意思,大家应该都明白了。一般都为true。意思就是允许完成当前动画。

下面是对应的代码:

HTML:

<div id="content">

    <div class="slide_box">

      <div class="img"> 

    <img src="images/page_a.png">

        <div class="start"> <a class="start_btn" href="javascript:void(0)">开始抽奖</a> </div>

      </div >

      <div class="img" style="display:none;" > 

    <img src="images/page_b.png"> 

    <a class="rank_30" href="javascript:void(0);">30级</a> 

    <a class="rank_45" href="javascript:void(0);">45级</a> 

    <a class="rank_55" href="javascript:void(0);">55级</a> 

  </div>

      <div class="img" style="display:none;" > 

    <img src="images/page_c.png"> 

    <a class="prize_notes" href="javascript:void(0);">奖品记录</a> 

  </div>

    </div>

</div>

 
CSS:
#content{/* margin-top:10em;*/ width:48em; margin:0 auto;}

#content div{ display:block; width:100%;}

#content div.cont_b{ position:relative; text-align:center;background:url(../images/content_bgb.jpg) no-repeat; background-size:100% 100%;}

#content div img{ display:block; width:100%; border:none;}

#content div .slide_box{ position:absolute; top:0px; width:100%; }

#content div .img .start{ position:absolute; top:290px;}

#content div .img a.start_btn{ display:block; width:150px; height:150px; text-indent:-9999px;  margin:0 auto;}/*修改*/

#content div .img a.rank_30{ position:absolute; top:230px; left:70px; display:block; width:250px; height:60px; text-indent:-9999px;}

#content div .img a.rank_45{ position:absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-9999px;}

#content div .img a.rank_55{ position:absolute; top:430px; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}

#content div .img a.prize_notes{ position:absolute; top:470px; right:50px; display:block; width:150px; height:150px; text-indent:-9999px;}

 

JS_jQuery:

var page =$(".slide_box .img");

var page_num = page.length;

var num = 0;

    $(".next_btn").click(function(e){

    if(num < 2){

page.slideUp().stop(false,true).eq(num+1).slideDown();

num++;

}else{

page.slideUp().stop(false,true).eq(0).slideDown();

num = 0;

}

});

});

上面是在工作中写一个点击事件效果时遇到的事件累积情况,,在JS部分,有用到stop()方法,大家可以将参数去掉或改变,试试看。希望对大家有所帮助。嘎嘎

Javascript 相关文章推荐
JavaScript 一道字符串分解的题目
Aug 03 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 #Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 #Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 #Javascript
js实现div弹出层的方法
Nov 20 #Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 #Javascript
js实现二代身份证号码验证详解
Nov 20 #Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP的ASP防火墙
2006/10/09 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
django 控制页面跳转的例子
2019/08/06 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python3中for循环踩过的坑记录
2020/12/14 Python
用Python实现职工信息管理系统
2020/12/30 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
开办大学饮食联盟创业计划书
2014/01/29 职场文书
租房协议书范例
2014/10/14 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Oracle 触发器trigger使用案例
2022/02/24 Oracle
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers