jquery顯示元素增量然後顯示在相反

我想顯示10個元素（圖像）增量。當顯示第9張圖像時，我想再次顯示它們（旋轉），但這次是反向顯示。jquery顯示元素增量然後顯示在相反

所以，顯示圖像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/

任何幫助或想法大加讚賞！

來源

2012-01-20 IntricatePixels

全部例如你有沒有考慮整合JavaScript的'反向（）'方法？否則，'for loop'從9到0反向。 – Josh

如果您跟蹤狀態（無論您是遞增還是遞減），您可以在轉換函數中使用它。

你幾乎有三種情況，無論是正常遞增，正常遞減，還是需要轉換。在第三種情況下，我們可以從增量切換到遞減（反之亦然），然後再次調用轉換函數。

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/

來源

2012-01-20 02:08:46 zkhr

工作得很好，非常感謝您的解決方案！ – IntricatePixels

jquery顯示元素增量然後顯示在相反

回答

相關問題