CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1744228
user1744228

Reputation: 153

JQuery/Javascript simple div slideshow

Here's a simple animation i'm trying to make. The divs array carries the id of different divs. The loop function simply loops through the array and shows the divs and hides them making it like a slideshow. For some reason, both divs show at the same time and then hide at the same time. I just couldn't figure out why...please help out! Thanks!

Edit:I think the javascript loop isn't waiting for the JQuery animation to finish. I think ill have to use the setInterval function? Can someone tell me how I can use it here?

<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>

Upvotes: 0

Views: 600

Answers (1)

j08691
j08691

Reputation: 207861

How about this:

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();
});

Upvotes: 1

Related Questions