在第二次点击时使用变量更改

Question

单击 .button 时，我想隐藏 4 个帖子，然后显示接下来的 4 个帖子，然后单击 .button 第二次应该隐藏现在可见的 4 个帖子（即帖子 5-8）并显示接下来的 4 个（发布 9-12）等等。

我的代码如下所示：

  var i = 0;
  function fadeOutFour(){
      $('.post').eq(i++).fadeOut(1000, function(){
        $('.post').eq(i++).fadeIn(1000);
        $('.post').eq(i++).fadeIn(1500);
        $('.post').eq(i++).fadeIn(2000);
        $('.post').eq(i++).fadeIn(2500);
      });
      $('.post').eq(i++).fadeOut(750);
      $('.post').eq(i++).fadeOut(500);
      $('.post').eq(i++).fadeOut(250);  
  }

  $('.button').click(function(){
        fadeOutFour(function(){
            i += 4;
        });
  });

现在点击工作后我无法获取 NEW 变量。所以首先，我做错了什么？另外，如果有更顺畅和更智能的方法来做到这一点，请告诉我:) 干杯！

Answer 1

执行此操作的更简单紧凑的方法是这样

看看

http://jsfiddle.net/techsin/cfBeu/4/

• 在前一个项目消失之前，不会预加载下一个项目。
• 能够加载额外的项目，即使它们不完全是 n/4。
• 代码更少。
• 更流畅。

代码如下：

var n=v=4, time= 500, $p= $('.post'), t =true;


$('.button').click(function(){
    if(t){
        t=false; if(n<$p.length+1) so();
    }});

st();
function st() {$p.slice(n-v,n-0).fadeIn(time,function(){t=true;});}
function so() {$p.slice(n-v,n-0).fadeOut(time,function() {st();}); n+=v;}

Answer 2

这就是你要找的东西吗？

Working jsFiddle here

var i = 0;
$('.post').eq(i++).fadeIn(1000);
$('.post').eq(i++).fadeIn(1500);
$('.post').eq(i++).fadeIn(2000);
$('.post').eq(i++).fadeIn(2500);

function fadeOutFour() {
    firstHide(i);
    thenShow(i);
    i += 4;
}

function firstHide(i) {
    h = i - 4;
    $('.post').eq(h++).fadeOut(1000);
    $('.post').eq(h++).fadeOut(750);
    $('.post').eq(h++).fadeOut(500);
    $('.post').eq(h++).fadeOut(250);
}

function thenShow(i) {
    $('.post').eq(i++).fadeIn(1000);
    $('.post').eq(i++).fadeIn(1500);
    $('.post').eq(i++).fadeIn(2000);
    $('.post').eq(i++).fadeIn(2500);
}

$('.button').click(function () {
    fadeOutFour(function () {
        i += 4;
    });
});