源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

理解jQuery stop()方法

  • 时间:2021-04-14 21:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:理解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:
[url=javascript:void(0)]       </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:   JS_jQuery:
[u]复制代码[/u] 代码如下:
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()方法,大家可以将参数去掉或改变,试试看。希望对大家有所帮助。嘎嘎
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部