作为前端开发人员,JSJQuery是我们经常用到的开发语言和工具类库。我们都晓得,在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="data: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="data: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="data: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()方法,大家可以将参数去掉或改变,试试看。希望对大家有所帮助。嘎嘎

jQuery stop()浅析的更多相关文章

  1. jQuery基础 浅析(含基本方法和选择器)

    1.jQuery与DOM互相转换 jQuery入库函数:$(document).ready(function(){}) $(function(){}) $(“#btn”):jQuery存储的是DOM对 ...

  2. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  3. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  4. jQuery 3.0 的 Data 浅析

    jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一 ...

  5. (转)【深入浅出jQuery】源码浅析2--奇技淫巧

    [深入浅出jQuery]源码浅析2--奇技淫巧 http://www.cnblogs.com/coco1s/p/5303041.html

  6. 【深入浅出jQuery】源码浅析2--使用技巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  7. jQuery内部原理和实现方式浅析

    这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下 这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQ ...

  8. 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法(转载)

    在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...

  9. jQuery 3.0的domManip浅析

    domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...

随机推荐

  1. MySQL 5.6学习笔记(数据类型)

    MySQL支持多种数据类型,主要有数值类型.日期/时间类型和字符串类型. 数值数据类型:包括整数类型TINYINT.SMALLINT.MEDIUMINT.INT.BIGINT.浮点小数类型FLOAT的 ...

  2. [CTCI] 子串判断

    子串判断 题目描述 现有一个小写英文字母组成的字符串s和一个包含较短小写英文字符串的数组p,请设计一个高效算法,对于p中的每一个较短字符串,判断其是否为s的子串. 给定一个string数组p和它的大小 ...

  3. [CTCI] 双栈排序

    双栈排序 题目描述 请编写一个程序,按升序对栈进行排序(即最大元素位于栈顶),要求最多只能使用一个额外的栈存放临时数据,但不得将元素复制到别的数据结构中. 给定一个int[] numbers(C++中 ...

  4. Mac OSX 快捷键&命令行

    一.Mac OSX 快捷键 ctrl+shift                                    快速放大dock的图标会暂时放大,而如果你开启了dock放大Command+Op ...

  5. C++类中的成员函数和构造函数为模板函数时的调用方法

    所谓模板函数其实就是建立一个通用函数,这个通用函数的形参类型不具体指定,用一个虚拟类型来代表,这个通用函数就被称为函数模板. 例: #include <iostream> using na ...

  6. How to fix ERR_SSL_VERSION_INTERFERENCE on Chrome?

    https://ugetfix.com/ask/how-to-fix-err_ssl_version_interference-on-chrome/ Question Issue: How to fi ...

  7. (原创)谈谈boost.asio的异步发送

    在上一篇博文中提到asio的异步发送稍微复杂一点,有必要单独拿出来说说.asio异步发送复杂的地方在于: 不能连续调用异步发送接口async_write,因为async_write内部是不断调用asy ...

  8. linux命令(46):程序运行前后台切换

    A,Shell支持作用控制,有以下命令:1. command& 让进程在后台运行2. jobs 查看后台运行的进程3. fg %n 让后台运行的进程n到前台来4. bg %n 让进程n到后台去 ...

  9. Spring和Mybatis整合过程中遇到的一个找不到sqlSessionFactory或sqlSessionTemplate的异常

    先看启动web项目时IDEA控制台抛出的异常(红色部分): D:\tomcat-kafka-\bin\catalina.bat run [-- ::,] Artifact Gradle : com.x ...

  10. hive查询遇到java.io.EOFException: Unexpected end of input stream错误

    hive查询遇到java.io.EOFException: Unexpected end of input stream错误 原因基本上有两个: 空文件 不完整的文件 解决办法: 删除对应文件- 参考 ...