javascript中stop方法的作用是什么

javascript中stop方法作用是阻止在连续动画或事件中出现重复累积状况的，语法格式为“$(元素).stop是否停止动画,是否允许完成当前动画)”。stop()在语法上的两个参数都是Boolean布尔值。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

作为前端开发人员，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="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：

#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()方法，大家可以将参数去掉或改变，试试看。@R_126_384@。

【推荐学习：javascript高级教程】

以上就是javascript中stop方法的作用是什么的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！