クリックごとに `animate（）`の整数値を増やす方法

Question

クリックごとに整数値をanimate()に増やすにはどうしたらいいですか？例えば

、

HTML、

<ul class="items-thread"> 
    <li class="item-thread">1</li> 
    <li class="item-thread">2</li> 
    <li class="item-thread">3</li> 
    <li class="item-thread">4</li> 
    <li class="item-thread">5</li> 
    <li class="item-thread">6</li> 
    <li class="item-thread">6</li> 
    <li class="item-thread">7</li> 
</ul> 
<a href="#" class="more">more</a> 

jqueryの、

$('.more').click(function(){ 
    $('.items-thread').animate({scrollTop:50}, 500); 
    return false; 
}); 

私がクリックしたときに、私は最初の.items-threadの要素が50pxを上にスクロールされるボタンをクリックして、

ボタンを2回目に押すと、スクロールして 100pxのように表示されます。

Answer 1

は、変数を使用し、各クリックでその価値を高める：

var scrollAmount = 50; 
$('.more').click(function(){ 
    $('.items-thread').animate({scrollTop:scrollAmount}, 500); 
    scrollAmount += 50; 
    return false; 
}); 

Answer 2

このような何かがそれを行うだろう。

$('.more').click((function(){ 
    var nScrollTop = 0; 

    var animate = function() { 
     nScrollTop += 50; 
     $('.items-thread').animate({scrollTop: nScrollTop}, 500); 
     return false; 
    }; 

    return animate; 
})()); 

Answer 3

だけ使う "+ ="

は、あなたがこれで行くCSSを投稿することができ、このバイオリンはそれが http://jsfiddle.net/pixelass/eKkZ4/

$('.more').click(function(){ 
    $('.items-thread').animate({marginLeft: '+=50px'}, 500); 
    return false; 
});