Slideshow gone haywire

Question

我有一個幻燈片循環和一切，但它不像我所期望的那樣工作。

這裏是一個小提琴：http://jsfiddle.net/Hive7/Mb5nR/1/

的Jquery：

// Customisable 

var gap = 3; 
var duration = 0.6; 

// Non Customisable 

var g = gap * 1000; 
var d = duration * 1000; 
var loop = $('.slideshow img').length; 
var loopDelay = 200; 
var x = 1; 
var i = 1; 

while(i <= loop){ 
    $('.slideshow img:nth-child(' + x + ')').delay(g).fadeOut(d); 
    x++; 
    i++; 
    $('.slideshow img:nth-child(' + x + ')').delay(g + loopDelay).fadeIn(d); 
    var h = g; 
    var g = x * h; 
    var lD = loopDelay; 
    var loopDelay = lD + 200; 
} 

應該發生什麼，我認爲是它會經過的所有元素的啓動隊列，使他們所有進出連續雖然褪色他們所有這樣做在同一時間，並沒有淡入

Answer 1

問題是，jQuery使用多線程的命令影響圖形顯示，所以你的fadeIn和fadeOut調用正在後臺運行（在自己的線程），而主執行線程立即執行下一條指令。所以，當你的第一張圖像淡出時，主線程已經告訴下一張圖像淡入。下一張圖像，以及之後的圖像，等等。所有在（或多或少）完全相同的時間。

你需要的是像fadeIn和fadeOut這樣的命令的回調函數。請參閱the jQuery API documentation page for fadeOut並注意可以提供可選的回調。這個回調必須是一個只有在fadeOut完成後纔會觸發的函數。您需要使用此行爲，以便每個淡入淡出完成後您的腳本纔會繼續。

例如：

hideCurrentImage = new function() { 
    $currentImage = //your code to select displayed image goes here 
    $currentImage.fadeOut(d, showNextImage); 
}; 

showNextImage = new function() { 
    $nextImage = //your code to select next image from set goes here 
    $nextImage.fadeIn(d, hideCurrentImage); 
}; 

使用這種機制將意味着圖片只能淡入淡出一前一後，因爲每次調用淡入和淡出指定要使用的回調函數，一旦褪色完成。所以你不會在同一時間看到它們全部加載並褪色。