jquery 递增显示元素然后反向显示

Question

我想逐步显示 10 个元素（图像）。当显示第 9 个图像时，我想再次显示它们（旋转），但这次是相反的。

因此，显示图像 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ...

当到达第 9 个时 ... 暂停，然后 ...

显示图像 9, 8, 7, 6, 5 , 4, 3, 2, 1

HTML：

<div class="home-gallery">
<img class="yummy-choco" src="home_chocolate1.jpg" /> 
<img class="yummy-choco" src="home_chocolate2.jpg" /> 
<img class="yummy-choco" src="home_chocolate3.jpg" /> 
<img class="yummy-choco" src="home_chocolate4.jpg" /> 
<img class="yummy-choco" src="home_chocolate5.jpg" /> 
<img class="yummy-choco" src="home_chocolate6.jpg" /> 
<img class="yummy-choco" src="home_chocolate7.jpg" /> 
<img class="yummy-choco" src="home_chocolate8.jpg" /> 
<img class="yummy-choco" src="home_chocolate9.jpg" /> 
<img class="yummy-choco" src="home_chocolate10.jpg" />
</div>

我到目前为止的 Javascript / jQuery 代码（无法让相反的工作！）：<​​/strong>

// show first image
$('.yummy-choco').hide().eq(0).show();

var pause = 250;
var chocolates = $('.yummy-choco');
var count = chocolates.length;
var i = 0;

setTimeout(transition,pause);

function transition()
{                  
    chocolates.eq(i).fadeIn();

    if (++i >= count)
    {
        i = 0;
    }
    // if on the 10th image, show then pause
    if(i == 9) 
    {
        chocolates.eq(9).fadeIn();
        $(".home-gallery").delay(3000).show(function( ) 
        {
            // here i want to show the images in reverse
            // maybe a for loop?
            chocolates.eq(i-1).fadeOut();
            setTimeout(transition, pause); 
        });
    }
    else 
    {
        chocolates.eq(i-1).fadeOut();
        setTimeout(transition, pause); 
    }
}

你能在这里查看它的半工作版本： http://www.azature.com/azchocolates/ ！

非常感谢任何帮助或想法

Answer 1

如果您跟踪状态（无论是递增还是递减），您可以在转换函数中使用它。

您几乎会遇到三种情况，要么正常递增，要么正常递减，要么需要转换。在第三种情况下，我们可以从递增切换到递减（反之亦然），然后再次调用转换函数。

var delay = 1000,
    pause = 3000,
    chocolates = $(".yummy-choco"),
    count = chocolates.length,
    id = 0,
    incrementing = true;

chocolates.eq(id).show();

setTimeout(transition, delay);

function transition() {
    var fadeOutId = id,
        totalTimeout = delay;

    if (incrementing && id < count - 1) {
        id++;
    } else if (!incrementing && id > 0) {
        id--;
    } else {
        incrementing = !incrementing;
        return transition();
    }

    chocolates.eq(id).fadeIn();
    chocolates.eq(fadeOutId).fadeOut();

    if(id === 9) {
        totalTimeout += pause;
    }

    setTimeout(transition, totalTimeout);
}

完整示例位于 http://jsfiddle.net/AWcvz/1/