2 
$(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 作为参数传递。感谢您的所有帮助。

谢谢！

4

3 回答 3

1

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

如果你在这个上使用 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);
于 2012-12-27T14:46:58.823 回答
0

考虑以下 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 中无限循环。它也比您的代码更有效，因为它只在 DOM 中查询 div 列表一次。

更新：分叉的小提琴

于 2012-12-27T14:53:33.633 回答
0

代替

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

采用

startLoop =(startLoop+1)%sizeLoop;

检查演示http://jsfiddle.net/JvdU9/ - 1st div 在 4th 消失后立即被动画化。

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/

于 2012-12-27T15:01:13.580 回答