理解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:

代码如下:
Box">

CSS:

代码如下:
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:

代码如下:
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插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...