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()方法,大家可以将参数去掉或改变,试试看。希望对大家有所帮助。嘎嘎
转载于:https://www.cnblogs.com/xiaochao12345/p/4113017.html
jQuery stop()浅析相关推荐
- 深入浅出 JQuery (一) 浅析JQuery
1. 概述 一种新技术.新思维的出现都是因为它更方便了人们的需要,解决了目前的一些问题,它产生的同时有好处也有弊端,要看我们如何应用. 前面已经给大家介绍了JavaScript脚本语言,它在很大程度 ...
- 浅析jQuery的链式调用 之 each函数
如果对于jquery的$()包装器函数还不是很清楚,请先参阅我的上一篇日志:浅析jQuery的链式调用 话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到 ...
- [转载]浅析jQuery框架与构造对象
浅析jQuery框架与构造对象 这是一些分析jQuery框架的文字 针对jQuery 1.3.2版本 面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉 ...
- ajax 与route的区别,浅析vue-router jquery和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数 传参: this.$router.push({ path ...
- jquery 监听td点击事件_VUE @hook浅析(监听子组件的生命周期钩子) - 古兰精
一.前言 接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...
- 浅析JQuery中的html(),text(),val()区别
1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但 ...
- 浅析jQuery原理并仿写封装一个自己的库
[前言]最近项目忙的脚不沾地,刚刚结束,准备整理一下以前写的一些学习笔记和技术文章.本文原是很久之前看jq源码时写的片段,隔了很久再看都忘得差不多了.简单整理出来,做个记录. 作为一名前端工程师,jQ ...
- jQuery 3.0的domManip浅析
domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...
- jquery中prop()方法和attr()方法的区别浅析
引用:http://www.jb51.net/article/41170.htm 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该 ...
最新文章
- 单片机异常复位后如何保存变量数据
- mysql下载为csv_MySQL 查询结果保存为CSV文件
- OVS ofproto(二十三)
- .Net下的签名与混淆
- get到一个生气后的牵手方式!太可爱了
- iOS开发 - 抛出异常
- latex中括号大小控制 [转]
- python抓资源_python3 抓取网页资源的 N 种方法
- 人工智能如何改变农业?这是五大类创业公司全图
- CCF202012-4 食材运输(100分题解链接)
- 使用javah 生成.h头文件
- 数据结构与算法分析(C++语言版)张琨版 课后答案———第一章
- 基于二值距离变换的图像细化的代码实现
- MAC锁屏不断网(快捷键启用屏保)
- AGV|简单粗暴分类及其各自优劣势
- 【Python爬虫练习】虎扑社区步行街版块首页信息爬取(BeautifulSoup+MongoDB)
- 我的计划、你的计划与世界的计划
- OpenDlight MD-SAl应用开发(二)- ODL源码编译运行
- 压力、焦虑还是抑郁? 正确诊断再治疗
- 基于labview的小波去噪算法及传统去噪算法性能的对比分析
热门文章
- 验证码识别服务提供商
- WSS 3.0部署备忘 六
- [导入]MsAjax Lib- Date.parseInvariant 函数
- L2-040 哲哲打游戏 (25 分)-PAT 团体程序设计天梯赛 GPLT
- 蓝桥杯 ADV-111 算法提高 Quadratic Equation
- springboot tomcat配置_Spring Boot项目如何同时支持HTTP和HTTPS协议
- linux之创建大文件
- js中引用类型赋值(拷贝)问题
- 【通过操作指针,与指针做函数參数#39;实现字串在主串中出现的次数,然后将出现的部分依照要求进行替换 
】...
- 软件过程评估和软件能力评价的方法与步骤