JSFiddle - React, Tailwind, and code Playground

jquery stop 函数分析

HTML

<div class="container">
        <p class="count-number">0</p>
        <span class="border100"></span>
        <small>left:100px</small>
        <button id="start">开始</button>
        <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(){
    //每次向下挪动100px
    var countNumber=0;
    $("#start").click(function(){
      //更改此处的stop参数，即可明白stop
      $(".animate-box").stop(false,true)
      .animate({top:'+=100px'},2000)
      countNumber++;
      $('.count-number').text(countNumber);
    });
});