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()方法,大家可以将参数去掉或改变,试试看。希望对大家有所帮助。嘎嘎
最新文章
- Apache Shiro系列二,概述 —— 基本概念
- css3中变形与动画(二)
- 11g 使用rman duplicate复制数据库,创建辅助实例
- Windows MDL原理总结
- C# 仿360悬浮球开发demo程序
- 如何正确的在项目中接入微信JS-SDK
- Android sqlitedatabase 事务
- [转] 深入理解React 组件状态(State)
- wcf 数值类型赋值不能的问题解决
- ajex 相关参数
- Codeforces 235E. Number Challenge DP
- 【Python】小练习
- CF758 D. Ability To Convert 细节处理字符串
- WAS8.5安装和部署
- Jave基础之选择排序
- ROS naviagtion analysis: costmap_2d--CostmapLayer
- php和js中数组的总结
- Python远程视频监控程序
- PHP 根据两点的经纬度计算距离
- 【转】Java中特殊的String类型
热门文章
- HDU 1431 素数回文
- (电工基地笔记)Vivado固化至SPI Flash
- FFmpeg(6)-通过av_find_best_stream()来获取音视流的索引
- (转)Maven学习-处理资源文件
- Android Service GetSystemService
- 灯光探测器LightProbe[Unity]
- HBase scan setBatch和setCaching的区别【转】
- 【Windows】windows核心编程整理(下)
- 【Ubuntu】查看GPU状态
- keepalived+nginx双机热备+负载均衡