jquery stop analisys

jquery stop方法分析

HTML

<div class="container">
    <span class="border100"></span>
    <small>left:100px</small>
    <div class="btn-group">
        <button id="start">开始</button>
        <button id="stop">停止</button>
        <button id="stop2">停止所有</button>
        <button id="stop3">停止但要完成</button>
        <button id="stop4">不停止动画队列，但是要立即完成</button>
    </div>
    <p><b>"开始"</b> 按钮会启动动画。</p>
    <p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
    <p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
    <p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> 
    <p><b>"立即完成当前动画，执行队列动画"</b> 会立即完成当前活动的动画，然后执行队列动画。</p> 
    <div class="animate-box">HELLO</div>
</div>

CSS

* { margin: 0; padding: 0;}
    body { font: 14px/1.5 arial; }
    p { line-height: 2; }
    .container { position: relative; height: 820px; margin: 10px; padding: 10px 0 ; border:1px solid #ddd;}
    button {  background: #eee; color: #666; border-radius: 3px; height: 24px; padding: 0 10px; margin: 0 10px 20px 0; border: 1px solid orange; cursor: pointer; }
    .border100 { position: absolute; left: 100px; top: 0; height: 800px; width: 0; border-left: 1px solid orange; }
    small { position: absolute; left: 102px; top: 200px; border-bottom: 1px solid green; color: green; }
    .animate-box { background: #98bf21; height: 100px; width: 200px; position: absolute; top: 220px; }

JavaScript

$(function(){
      $("#start").click(function(){
        $(".animate-box").animate({fontSize:'5em'},2000); 
        $(".animate-box").animate({left:'100px'},5000);
      });
      
      $("#stop").click(function(){
        $(".animate-box").stop(false,false);
      });

      $("#stop2").click(function(){
        $(".animate-box").stop(true,false);
      });

      $("#stop3").click(function(){
        $(".animate-box").stop(true,true);
      });
      
      $("#stop4").click(function(){
        $(".animate-box").stop(false,true);
      });
    });