Question

I’m required to develop a slideshow (not an existing one) with jQuery. I was able to change picture with a function that I created named changePic (takes an image link). It incorporates the fading animation from the jQuery library.

For the slideshow I’m trying to use a while loop. It kind of works, except that it doesn’t wait for the animation to finish.

How do I, a) wait for the animation to finish, b) delay the changing picture so it display the picture for a couple of seconds?

Also tried Settimeout, and it doesn’t work.

Edit:

Basically changing image is like this:

function changePic(imglink){
    var imgnode = document.getElementById("galleryimg");
    $(imgnode).fadeTo(500, 0, function(){
        $(imgnode).attr("src", imglink);
        $(imgnode).fadeTo(1000, 1);
    })
}

and the slideshow code is like this, but obviously it shouldn’t.

function slideshow(gallerylinks){
    var i=0;
    while (i<gallerylinks.length){
        changePic(gallerylinks[i]);
        i++;
    }
}

Answer 1

You could always try ditching the while loop, and going with a perpetually recursive function…

on the .animate, you could add a timeout function (at whatever interval) that calls the changePic function. As I have no idea what your code looks like, I will provide a fantastically generic outline.

/* array of imgUrls */

var imgUrls = new Array(); //populate it however
changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay)
{
   $('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){
        $('#slideHolder').attr('src', imgUrls[slideToShowIndex]);
        $('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() {
            setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay});
        });
   }});
}

$(document).ready(function() {
changePic(0, 5000, 5000, 10000);
});

This should (in theory) fade the image out, swap it with the new one, and fade it in (both taking 5 seconds) and then adding a delay to call itself with the next slide index in 10 seconds.

This is in no way perfect, but does outline the general idea. Since we have no idea what your code looks like, I can only assume your setTimeout was in the wrong spot. Doing it like this will make sure that the animation has finished before the timeout is set. This guarantees that the slide wont change until after the animation has changed.

of course you could always use a combination of the ‘:not(:animated)’ selector and a setInterval to achieve much the same effect.

EDIT: made a slight change to stack the animations properly. The thoery behind this still works even with the OPs addition of code.