jQuery stop()浅析
作为前端开发人员,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="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()浅析的更多相关文章
- jQuery基础 浅析(含基本方法和选择器)
1.jQuery与DOM互相转换 jQuery入库函数:$(document).ready(function(){}) $(function(){}) $(“#btn”):jQuery存储的是DOM对 ...
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery 3.0 的 Data 浅析
jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一 ...
- (转)【深入浅出jQuery】源码浅析2--奇技淫巧
[深入浅出jQuery]源码浅析2--奇技淫巧 http://www.cnblogs.com/coco1s/p/5303041.html
- 【深入浅出jQuery】源码浅析2--使用技巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery内部原理和实现方式浅析
这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下 这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQ ...
- 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法(转载)
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...
- jQuery 3.0的domManip浅析
domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...
随机推荐
- ubuntu for win10 里运行apache+php
一直想试试ubuntu for win10中运行网站测试一下,弄了好久,今天终于基本弄明白了, ubuntu for win10里的IP就是外面WIN10的IP,在里面建立网站了可以直接在外面WIN1 ...
- 2.1 Apache Axis2 快速学习手册之 POJO 构建Web Service
1. 准备:创建一个Maven Web App 项目 这里让我们使用Maven 模板创建一个Web App 项目 1. New------> Maven Project 2. 使用默认配置,点击 ...
- Atitit 项目源码的架构,框架,配置与环境说明模板 规范 标准化
Atitit 项目源码的架构,框架,配置与环境说明模板 规范 标准化 版本1.0 作者 艾龙 attilax 1. 概述:核心业务: 1 1.1. 功能文档路径 /palmWin/src/docum ...
- Android-优化UI性能(1)-降低主线程的堵塞时间
Android-优化UI性能(1)-降低主线程的堵塞时间 一 降低主线程的堵塞时间 Android已经提供了AsyncTask实现从主线程生成新的异步任务的方法. 定义并实现以下的类就可以(方法由系统 ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
- 每天一个linux命令(4) df命令
linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命令格式: df [选项] [文件] 2.命 ...
- Asp.Net上传大文件带进度条swfupload
Asp.Net基于swfupload上传大文件带进度条百分比显示,漂亮大气上档次,大文件无压力,先看效果 一.上传效果图 1.上传前界面:图片不喜欢可以自己换 2.上传中界面:百分比显示 3.上传后返 ...
- axios 的应用
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- openfire聊天记录插件
package com.sqj.openfire.chat.logs; import java.io.File; import java.util.Date; import java.util.Lis ...
- Spring boot下添加filter
https://www.cnblogs.com/OnlyCT/p/7133639.html ****************************************************** ...