Question

这是一个我想要制作的简单动画。 divs数组带有不同div的id。循环函数只是循环遍历数组并显示div并隐藏它们使其像幻灯片一样。出于某种原因，两个div同时显示然后隐藏在同一时间。我只是想不通为什么......请帮忙！谢谢！

编辑：我认为javascript循环不等待JQuery动画完成。我认为不得不使用setInterval函数？有人可以告诉我如何在这里使用它吗？

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>

<script>

var divs=["#slide1","#slide2"];

function loop(){
for (var i=0;i<divs.length;i++)
{
    $(divs[i]).show(1000).hide(1000);
}
}


$(document).ready(function(){
    //$("#slide1").show();
    loop();
});

</script>
</head>
<body>
<div id="slide1" style="display:none">ONE</div>
<div id="slide2" style="display:none">TWO</div>
</body>
</html>

Answer 1

这个怎么样：

<强> jsFiddle example

var divs = ["#slide1", "#slide2"];
function loop() {
    var elem = divs.shift();
    $(elem).show(1000).hide(1000, function () {
        divs.push(elem);
        loop();
    });
}
$(document).ready(function () {
    //$("#slide1").show();
    loop();
});

JQuery / Javascript简单div幻灯片

1 个答案: