javascript - 幻灯片失控

Question

我有一个可以循环播放的幻灯片以及所有内容，但它并不像我预期的那样工作。

这是一个 fiddle :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 调用在后台(在它们自己的线程中)运行，而主执行线程继续执行下一条指令 立即。因此，当您的第一个图像淡出时，主线程已经告诉下一个图像淡入。下一个图像，以及之后的图像，依此类推。全部发生在(或多或少)完全相同的时间。

您需要的是淡入淡出等命令的回调功能。请参阅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);
};

使用这种机制意味着图像只能依次淡入和淡出，因为每次调用 fadeIn 和 fadeOut 都会指定淡入完成后要使用的回调函数。因此您不会看到它们同时加载和淡出。