Question

点击.button我想要隐藏4个帖子，然后显示接下来的4个帖子，然后点击。按钮第二次应该隐藏现在可见的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;
    });
});

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

2 个答案: