jquery递增地显示元素，然后反向显示。

Question

我想以增量的方式显示10个元素(图像)。当第9幅图像显示时，我想再次显示它们(旋转)，但这次是相反的。

所以，显示图像1，2，3，4，5，6，7，8，9，10 .

当第九站到达..。停一下，然后..。

如图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代码(无法实现反向工作)：

// 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/的完整示例