理解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网页制作特殊效果用随机数
May 22 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js querySelector() 使用方法
Dec 21 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
Angularjs 基础入门
2014/12/26 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
Python pass 语句使用示例
2014/03/11 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
用友笔试题目
2016/10/25 面试题
学校司机岗位职责
2013/11/14 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
质量月口号
2014/06/20 职场文书
2015年维修工作总结
2015/04/25 职场文书
感恩的心主题班会
2015/08/12 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android