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/

的完整示例