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来无限制地动画！

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

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

我考虑过使用for循环，但无法弄清楚如何将一类div作为参数传递。所有的帮助表示赞赏。

谢谢！

Answer 1

好的，一般来说，你应该知道Javascript是一个单线程环境。与此同时，计时器事件通常不准确。我不确定jQuery是如何进行fadeIn和fadeOut的，但如果它不使用CSS3过渡，它将使用timeOut和Intervals。所以基本上，有很多计时器正在进行中。

如果你使用for循环中的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);

Answer 2

考虑以下JavaScript / jQuery：

$(function(){
    var divs = $('#cool_content > div').hide();
    var curDiv;
    var counter = 0;
    var doUpdate = function(){
        // Hide any old div
        if (curDiv)
            curDiv.fadeOut(1000);

        // Show the new div
        curDiv = divs.eq(counter);
        curDiv.fadeIn(1000);

        // Increment the counter
        counter = ++counter % divs.length;
    };
    doUpdate();
    setInterval(doUpdate, 2000);
});

这通过div无限循环。它也比你的代码更有效，因为它只查询一次div列表的DOM。

更新：Forked fiddle

Answer 3

而不是

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

使用

startLoop =(startLoop+1)%sizeLoop;

检查演示http://jsfiddle.net/JvdU9/ - 第4个div在第4个消失后立即动画。

<强> UPD：不确定我是否已经不知道你的问题，但我会尽力回答:) 无论你循环多少div-4,5或10，因为帧数是自动计算的

x=(x+1)%n表示x永远不会超过n-1：x>=0和x<n。

x=(x+1)%n只是等同于

if(x<n-1)
    x++;
else
    x=0;

至于我的第一个变体很可读:) 抱歉，我上次给你错误的演示。纠正一个 - http://jsfiddle.net/JvdU9/2/

使用Div类的setInterval循环很困难

3 个答案: