javascript - 使用 Divs 类的 setInterval 循环有困难

Question

$(document).ready(function fadeIt() {

    $("#cool_content > div").hide();

    var sizeLoop = $("#cool_content > div").length;
    var startLoop = 0;

    $("#cool_content > div").first().eq(startLoop).fadeIn(500);

    setInterval(function () {
        $("#cool_content > div").eq(startLoop).fadeOut(1000);

        if (startLoop == sizeLoop) {
            startLoop = 0
        } else {
            startLoop++;
        }

        $("#cool_content > div").eq(startLoop).fadeIn(1500);

    }, 2000);
});

在这里，我想要一类 div 进行无限动画处理!

但是，因为间隔设置为两秒，所以有一段时间没有显示 div!

循环这些 div 的动画的合适方法是什么？

我考虑过使用 for 循环，但无法弄清楚如何将一类 div 作为参数传递。感谢您的帮助。

谢谢!

Answer 1

好的，一般来说，你应该知道Javascript是一个单线程环境。与此同时，定时器事件通常不会准确准时。我不确定 jQuery 如何执行淡入和淡出，但如果它不使用 CSS3 转换，它将使用超时和间隔。所以基本上，有很多计时器在进行。

如果你在这一个上使用 for 循环，你会阻塞单个线程，所以这不是前进的方式。您必须自己在 setInterval 中进行淡入/淡出。

设置每个间隔调用的不透明度。比如 div.css('opacity', (opacity -= 10) + '%')

如果您尝试按顺序淡入和淡出，我认为这段代码可能会有所帮助

var opacity = 100,
    isFadingIn = false;
window.setInterval(function() {
    if (isFadingIn) {
        opacity += 10;
        if (opacity === 100) isFadingIn = false;
    } else {
        opacity -= 10;
        if (opacity === 0) isFadingIn = true;
    }

    $('#coolContent > div').css('opacity', opacity + '%');
}, 2000);