理解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：
<divid="content">
<divclass="slide_box">
<divclass="img">
<imgsrc="images/page_a.png">
<divclass="start"><aclass="start_btn"href="javascript:void(0)">开始抽奖</a></div>
</div>
<divclass="img"style="display:none;">
<imgsrc="images/page_b.png">
<aclass="rank_30"href="javascript:void(0);">30级</a>
<aclass="rank_45"href="javascript:void(0);">45级</a>
<aclass="rank_55"href="javascript:void(0);">55级</a>
</div>
<divclass="img"style="display:none;">
<imgsrc="images/page_c.png">
<aclass="prize_notes"href="javascript:void(0);">奖品记录</a>
</div>
</div>
</div>
CSS：
#content{/*margin-top:10em;*/width:48em;margin:0auto;}
#contentdiv{display:block;width:100%;}
#contentdiv.cont_b{position:relative;text-align:center;background:url(../images/content_bgb.jpg)no-repeat;background-size:100%100%;}
#contentdivimg{display:block;width:100%;border:none;}
#contentdiv.slide_box{position:absolute;top:0px;width:100%;}
#contentdiv.img.start{position:absolute;top:290px;}
#contentdiv.imga.start_btn{display:block;width:150px;height:150px;text-indent:-9999px; margin:0auto;}/*修改*/
#contentdiv.imga.rank_30{position:absolute;top:230px;left:70px;display:block;width:250px;height:60px;text-indent:-9999px;}
#contentdiv.imga.rank_45{position:absolute;top:230px;left:460px;display:block;width:250px;height:60px;text-indent:-9999px;}
#contentdiv.imga.rank_55{position:absolute;top:430px;left:170px;display:block;width:280px;height:60px;text-indent:-9999px;}
#contentdiv.imga.prize_notes{position:absolute;top:470px;right:50px;display:block;width:150px;height:150px;text-indent:-9999px;}
JS_jQuery:
varpage=$(".slide_box.img");
varpage_num=page.length;
varnum=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()方法，大家可以将参数去掉或改变，试试看。希望对大家有所帮助。嘎嘎