jQuery単純な左右のアニメーション

Question

矢印が目に見えるように移動し、途中のテキストを削除したいと思います。

http://jsfiddle.net/mplungjan/VZsG4/

<span class="arrow">&rarr;</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="span0">zhong</span><span id="span2">1</span><span id="span3">guo</span><span id="span4">2</span> 
<br /> 
<input type="button" id="start" value="start" /> 
<input type="button" id="reset" value="reset" /> 

var cnt = 0; 
var spanLength = $("span").length; 
$("#start").click(function() { 
    var tId = setInterval(
    function() { 
     if (cnt>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(); 
    });  
}); 

Answer 1

あなたはあなたのコードを持ついくつかの問題だった：

• .arrowをあなたが必要と矢印
• にleftないrightをアニメーション化する必要があるposition:relative
• とCSSを必要としますleftプロパティを取得するposition()の
• var tIdニーズが.arrow以来
• スパンをあるより広い範囲にあるように、間隔が
は、あなたがに追加する
• cnt = 0ニーズ欠けている要素のエラーの原因となった#span1をスキップクリアしていないされませんでした。機能リセット

See working fiddle here →

var cnt = 0; 
var spanLength = $("span").length; 
var tId; 
$("#start").click(function() { 
    tId = setInterval(
    function() { 
     if (cnt>=spanLength-1) { 
      clearInterval(tId); 
     } else { 
      $(".arrow").animate(
      {"left": $("#span"+(cnt+1)).position().left}, "slow", 
       function(){ 
       $("#span"+(cnt++)).hide(); // remove word 
       $("#span"+(cnt++)).hide(); // remove number 
       $(".arrow").animate({"left":0}); // move back 
       } 
     ); 
     } 
    }, 
    1000); 
}); 
$("#reset").click(function() { 
    clearInterval(tId); 
    cnt = 0; 
    $("span").each(function() { 
     $(this).show(); 
    });  
});