Question

How can I increase an integer number in animate() on each click?

For instance,

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;
});

When I first click the button the element of .items-thread will be scrolled up 50px, and when I click the button second time, it should be scrolled up 100px and so on.

Answer 1

Use a variable, and increase its value on each click:

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