title: jQuery simple left and right animation
body: <p>I would like the arrow to move visibly to the digit and remove the text on the way back. </p>
  
  <p><a href="http://jsfiddle.net/mplungjan/VZsG4/" rel="nofollow">http://jsfiddle.net/mplungjan/VZsG4/</a></p>
  
  <pre><code>&lt;span class="arrow"&gt;&amp;rarr;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span id="span0"&gt;zhong&lt;/span&gt;&lt;span id="span2"&gt;1&lt;/span&gt;&lt;span id="span3"&gt;guo&lt;/span&gt;&lt;span id="span4"&gt;2&lt;/span&gt;
  &lt;br /&gt;
  &lt;input type="button" id="start" value="start" /&gt;
  &lt;input type="button" id="reset" value="reset" /&gt;
  
  var cnt = 0;
  var spanLength = $("span").length;
  $("#start").click(function() {
    var tId = setInterval(
      function() {
        if (cnt&gt;spanLength-1) clearInterval(tId);
        $(".arrow").animate(
          {"right": $("#span"+(cnt+1)).position()}, "slow",
            function(){
              $("#span"+(cnt++)).hide(); // remove word
              $("#span"+(cnt++)).hide(); // remove number
              $(".arrow").animate({"left":0}); // move back
            }
        );
      },
    1000);  
  });
  $("#reset").click(function() {
      clearInterval(tId);
      $("span").each(function() {
          $(this).show();
      });    
  });
  </code></pre>