使用 jQuery 旋转带有 setTimeout 的 div答案

【问题标题】：use jQuery to rotate divs with a setTimeout使用 jQuery 旋转带有 setTimeout 的 div
【发布时间】：2011-11-17 18:46:49
【问题描述】：

所有，我有这个代码：

var speed= 1000,
num = 1,
timer;

(function rotate() {
    var container_footer = jQuery("#rotate_container");
    var divs_footer = container_footer.children();
    var divs_footer_length = divs_footer.length;
    $("#item"+num).stop(true, true).fadeIn(speed).delay(speed).fadeOut(speed);;
    num>divs_footer_length  ? num=0 : num++;
    timer = setTimeout(rotate, speed*3);
})();

这很好用并且可以旋转图像。但是，它会在显示后立即淡出一个 div 并淡入另一个 div。我想要发生的是根据速度变量淡入一个 div，然后显示 15 秒，然后以该速度淡出变量，然后以速度变量淡入另一个 div 并显示 15 秒等。关于如何做到这一点的任何想法将不胜感激？谢谢！

【问题讨论】：

标签： jquery settimeout fadein fadeout

【解决方案1】：

您可以让旋转功能简单地将图像淡出，然后淡入下一张，而不是淡入、等待和淡出。所以从已经显示的第一张图像开始，然后在 rotate() 上调用 setTimeout。示例：

var speed= 1000,
num = 1,
timer = setTimeout(rotate, 15000); //15 seconds as requested

function rotate() {
    var container_footer = jQuery("#rotate_container");
    var divs_footer = container_footer.children();
    var divs_footer_length = divs_footer.length;
    $("#item"+num).fadeOut(speed);
    num>divs_footer_length  ? num=0 : num++;
    $("#item"+num).fadeIn(speed);
    timer = setTimeout(rotate, 15000);
};

【讨论】：

我希望它等待指定的时间段。所以我希望它在尝试旋转另一个之前显示 15 秒。
是的，所以改成 setTimeout(rotate, 15000);那会为你做的。它将等待 15 秒，然后再次调用旋转。

【解决方案2】：

您可以使用在 fadeOut 上发生的回调并使用一点递归来循环遍历您的 div。如果您设置了 div 的限制，这将很有效。以下对我有用，即使是延迟。

        var rotate, speed= 1000;

        rotate = function (itemNum) {
            $("#item" + itemNum).stop(true, true).fadeIn(speed).delay(speed).fadeOut(speed, function () {
                //callback when fadeOut completes
                rotate(itemNum + 1);
            });
        }
         rotate(1);

【讨论】：