2

我已经成功地制作了我的动画，我正在使用 setTimeout 更改 div 的大小。问题是，我找不到让它们循环的方法，我试图在函数本身中调用 start() 函数，但是在第一次执行之后，动画变得非常混乱。有人可以帮我制作整个序列循环而不会遇到任何麻烦吗？

$(document).ready(function () {
    alert('Sådan!');
});


function div1ind() {
    $(function () {
        $('#div1').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div1').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });

}

function div1ud() {

    $(function () {
        $('#div1').animate({
            height: '540px',
            width: '959px',
            top: '0px',
            left: '0px'
        }, 500);

    });



    $(function () {
        $('#div1').css({
            'z-index': 1
        })
    });
}

function div2ind() {

    $(function () {
        $('#div2').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div2').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });


}



function div2ud() {

    $(function () {
        $('#div2').animate({
            height: '540px',
            width: '959px',
            top: '0px',
            left: '959px'
        }, 500);

    });


    $(function () {
        $('#div2').css({
            'z-index': 1
        })
    });
}

function div3ind() {

    $(function () {
        $('#div3').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div3').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });

}

function div3ud() {

    $(function () {
        $('#div3').animate({
            height: '540px',
            width: '959px',
            top: '540px',
            left: '0px'
        }, 500);

    });

    $(function () {
        $('#div3').css({
            'z-index': 1
        })
    });
}

function div4ind() {

    $(function () {
        $('#div4').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div4').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });
}

function div4ud() {

    $(function () {
        $('#div4').animate({
            height: '540px',
            width: '959px',
            top: '540px',
            left: '959px'
        }, 500);

    });


    $(function () {
        $('#div4').css({
            'z-index': 1
        })
    });
}

function start() {

    $(function () {
        setTimeout('div1ind()', 2000);
        setTimeout('div1ud()', 4000);
        setTimeout('div2ind()', 6000);
        setTimeout('div2ud()', 8000);
        setTimeout('div3ind()', 10000);
        setTimeout('div3ud()', 12000);
        setTimeout('div4ind()', 14000);
        setTimeout('div4ud()', 16000);
    });
}

start();
4

2 回答 2

1

这对于 setInterval 来说是一个更好的情况，以防止出现多个超时实例的竞争条件。

像这样的解决方案的另一个好处是，您可以轻松地将函数调用添加或删除到您的列表中，而无需重新编程和仔细检查所有超时。

我在这里所做的是创建一个映射到其他函数的数组，然后设置一个每 2 秒触发一次的间隔。间隔增加 i 的值，并调用作为 i % x 模数的函数（其中 x 是列表中的函数数）。

（编辑：将代码调整为更整洁。编辑 2：包装在匿名函数中以防止调用相同的索引。）

var i = 0;
var function_map = [div1ind, div1ud, div2ind, div2ud, div3ind, div3ud, div4in, div4ud];    
window.setInterval(function() {
    function_map[i++ % function_map.length]()
}, 2000);

编辑：根据您在下面的评论，如果您希望它们有不同的延迟，您可以这样做（将超时添加到函数映射中并构建递归超时链）：

var i = 0;
var function_map = [
    [1000,div1ind], 
    [2000,div1ud], 
    [3000,div2ind], 
    [2000,div2ud], 
    [5000,div3ind], 
    [3000,div3ud], 
    [4000,div4in], 
    [2000,div4ud]
];
function start() {    
    var func = function_map[i++ % function_map.length];
    window.setTimeout(function() {
        func[1]();
        start();
    }, func[0]);
}
start();
于 2013-06-09T23:00:18.093 回答
1

您的setTimeout调用使函数在不同的时间开始，所以再做一个使start函数重新开始的调用：

function start() {
  setTimeout(div1ind, 2000);
  setTimeout(div1ud, 4000);
  setTimeout(div2ind, 6000);
  setTimeout(div2ud, 8000);
  setTimeout(div3ind, 10000);
  setTimeout(div3ud, 12000);
  setTimeout(div4ind, 14000);
  setTimeout(div4ud, 16000);
  setTimeout(start, 18000);
}

不要$(function(){ ... })到处使用，这是 的简写$.ready(function(){ ... })，即它会绑定ready事件。但是，如果你在ready事件发生后这样做，jQuery 只会立即调用回调，所以它只是无用的代码。

绑定ready一次事件以启动start函数，并从所有函数中删除额外的包装器。代替：

start();

使用 this 将start函数用作ready事件处理程序的回调：

$(start);

或等价物：

$(document).ready(start);
于 2013-06-09T22:49:42.493 回答