Как увеличить целое число в `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, а когда я нажимаю кнопку еще раз, он должен прокручиваться вверх 100px и т. Д.

Answer 1

просто используйте "+ ="

. Посмотрите эту скрипку, она добавляет 50 пикселей слева на каждый клик http://jsfiddle.net/pixelass/eKkZ4/

$('.more').click(function(){
   $('.items-thread').animate({marginLeft: '+=50px'}, 500);
   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

Используйте переменную и увеличивайте ее значение при каждом клике:

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