理解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 页面模板化很多人没有使用过的方法
Jun 05 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
js实现点击上传图片并设为模糊背景
Aug 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
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP导入导出Excel代码
2015/07/07 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python集合常见运算案例解析
2019/10/17 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
基于Python实现粒子滤波效果
2020/12/01 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
J2EE模式面试题
2016/10/11 面试题
经典大学生求职信范文
2014/01/06 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
毕业论文评语大全
2014/04/29 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书