理解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进行拖拽
Jul 20 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
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
PHP时间函数使用详解
2019/03/21 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
200行自定义python异步非阻塞Web框架
2017/03/15 Python
python+opencv实现动态物体识别
2018/01/09 Python
基于python log取对数详解
2018/06/08 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
django 信号调度机制详解
2019/07/19 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
司机工作自我鉴定
2014/09/19 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015大学生求职信范文
2015/03/20 职场文书
休假证明书
2015/06/24 职场文书
领导欢送会主持词
2015/07/06 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript