Question

全部，我有这段代码：

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。我想要发生的是基于速度变量的淡入淡出然后显示15秒然后以速度淡出变量，然后在速度变量淡入另一个div并显示15秒等任何关于如何做的想法将不胜感激？谢谢！

Answer 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);
};

Answer 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);

使用jQuery用setTimeout旋转div

2 个答案: