如何在每次点击时增加`animate()`中的整数答案

【问题标题】：How to increase an integer number in `animate()` on each click如何在每次点击时增加`animate()`中的整数
【发布时间】：2011-12-19 00:27:46
【问题描述】：

如何在每次点击时增加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等等。

【问题讨论】：

您能发布与此相关的 CSS 吗？ items-thread 的height 有限制吗？

标签： jquery jquery-animate scrolltop

【解决方案1】：

只需使用 "+="

看到这个小提琴它在每次点击时增加 50 px margin-left http://jsfiddle.net/pixelass/eKkZ4/

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

【讨论】：

【解决方案2】：

这样的事情就可以了。

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

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

   return animate;   
})());

【讨论】：

【解决方案3】：

使用变量，并在每次点击时增加其值：

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

【讨论】：