理解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 技巧
Apr 25 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
keep-alive保持组件状态的方法
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
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php输出xml属性的方法
2015/03/19 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
控制台报错object is not a function的解决方法
2014/08/24 Javascript
理解JS事件循环
2016/01/07 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python中的整除和取模实例
2020/06/03 Python
为什么说python适合写爬虫
2020/06/11 Python
linux比较文件内容的命令是什么
2015/09/23 面试题
建筑工程专业学生的自我评价
2013/12/25 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
参观考察邀请函范文
2014/01/29 职场文书
美术毕业生求职信
2014/02/25 职场文书
求职个人评价范文
2014/04/09 职场文书
爱心捐款倡议书
2014/04/14 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
MySQL Router的安装部署
2021/04/24 MySQL