本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
javascript中stop方法作用是阻止在连续动画或事件中出现重复累积状况的,语法格式为“$(元素).stop是否停止动画,是否允许完成当前动画)”。stop()在语法上的两个参数都是Boolean布尔值。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
作为前端开发人员,JS和JQuery是我们经常用到的开发语言和工具类库。我们都晓得,在jQuery中有一个很强大的方法――stop(),他是阻止在连续动画或事件中出现重复累积状况的方法。那么,stop()怎么用呢?来带大家先认识一下stop()吧:
stop()在语法上有两个参数,分别都是Boolean布尔值。且都是可选的,但是也有规定,如下:
1 | $(selector).stop(stopAll,goToEnd)
|
参数:(默认情况下,不写参数,则会被认为两个参数都是false。)
stopAll:可选。规定是否停止被选元素的所有加入队列的动画。意思就是如果该参数值为true,则会停止所有后续动画或事件。如果该参数值为false,则只停止被选元素当前执行的动画,后续动画不受影响。因此,该参数一般都为false。
goToEnd:可选。规定是否允许完成当前动画,该参数只能在设置了stopAll参数时使用。上面我们说了,stopAll参数我们一般都会写fasle值,不是默认,而是真实的写上该参数。那么goToEnd参数就有两个选择了,一个是false,一个是true。其中意思,大家应该都明白了。一般都为true。意思就是允许完成当前动画。
下面是对应的代码:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #content{ 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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中stop方法的作用是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jQuery如何实现不能点击元素
react怎么安装jQuery
jQuery中怎么格式化时间
jQuery prop()和attr()区别是什么
jQuery怎么判断数组是否为空?
jQuery如何判断某个属性是否存在hasattr
jQuery div能添加元素吗
用jQuery如何获取类名
jQuery怎么让select不可选
jQuery怎么判断css文件是否存在
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript中stop方法的作用是什么