クリックごとにXずつjQueryを増やす

Question

私はnext/prevナビゲーションをゼロから作成しています。最後に到達するまで、各クリックでXで残された余白を増やす（アニメーション化する） "次へ"ボタンをクリックしますこの場合は-320ピクセル）、戻るボタンと同様の方法です。私はおそらく密なユーバーされています - しかし、私のjavascriptのは以下の通りです：

function myFunction() { 

    "use strict"; 

    if (jQuery) { 
     var $next = $(".next"), 
      $back = $(".back"), 
      $box = $(".box"), 
      regWidth = $box.width(), 
      $contain = $(".contain"), 
      len = 0, 
      combinedWidth = 0, 
      len = $box.length; 

     while (len--) { 

      combinedWidth = combinedWidth + $($box[len]).width(); 

     } 


     $contain.width(combinedWidth); 


     $next.bind('click', function (e) { 

      e.preventDefault(); 


      var $this = $(this), 
       $tWidth = $this.width(); 



      $contain.animate({ 

       marginLeft: "+=" + (-regWidth) + "px" 

      }); 

     }); 

     //click event for back 
     $back.click(function (e) { 
      e.preventDefault(); 

      var $this = $(this), 
       $tWidth = $this.width(); 
      $contain.animate({ 

       marginLeft: "+=" + (regWidth) + "px" 

      }); 


     }); 





    } 
}; 

$(function() { 

    myFunction(); 
}); 

次のようにCSSは次のとおりです。

#wrap { 
    width:320px; 
    margin:0 auto; 
    overflow:hidden; 

} 
.contain { 

    float:left; 
    background:#e9e9e9; 
    height:480px; 

} 

.box 
{ 
    min-height:75px; 
} 

すべてのヘルプははるかに高く評価されるだろう！ Nは、ピクセル数である

$element.animate({marginLeft: "+=Npx"}); 

：

Answer 1

あなたはこのようにそれを使用しています。 Example