Question

i’m starting to learn jquery and i am now working on an header image crossover with jquery. ive got the code working but what i now need is an interval between images, after the crossover i want the script to pause for a specific time and then continue with the next image.

ive got this code.

$(document).ready(function(e) {
    $('.img:gt(0)').hide();
    setInterval(function(){
        $(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#kop")
    }, 4000);
});

is it possible in this form or do i have to change the code completly.

i now got it running on a test server of mine. swinging.icwebdesign.nl

Answer 1

Currently what is happening is you’re taking 3000ms to do your transition, and inbetween the transition function call is 4000ms – therefore, you’ll only get a 1000ms “delay”.
The second parameter in setInterval() is the delay time, which in the code below is equal to the fadeTime + delay time.

$(document).ready(function(e) {
    var delay = 3000, 
        fadeTime = 3000;
    $('.img:gt(0)').hide();
    setInterval(function(){
        $(".img:first-child").fadeOut(fadeTime).next(".img").fadeIn(fadeTime).end().appendTo("#kop")
    }, delay+fadeTime);
});