0

单击 .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;
        });
  });

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

4

2 回答 2

3

更简单和紧凑的方法是这样

看一看

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;}
于 2013-08-29T19:20:01.863 回答
1

这是你要找的东西吗？

在这里工作 jsFiddle

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;
    });
});
于 2013-08-29T17:58:50.713 回答