Question

What I’m trying to achieve is simple. I’ve seen plugins do this, but I don’t wanna use a plugin.

I have two images in anchors. a#fade1 I want to load in, and then show for 3s and then fadeout. Then a#fade2 I want to fade in after a#fade1 and show for 3s and then fade out while repeating the process.

However when I set a#fade2 to 900 it fades in at the speed the others fadeOut at 450ms. So can anybody help me with this, and also explain why what I just mentioned doesn’t work?

Here’s my code.

$('a#fade1, a#fade2').hide();

$('div#fadetransitions').ready(function() {
    $('a#fade1').fadeIn(450).delay(3000).fadeOut(450);
    $('a#fade2').delay(3450).fadeIn(900).delay(3000).fadeOut(450);
    return false;
});

Answer 1

You can do that :

$('a#fade1, a#fade2').hide();

function show1() {
    $('a#fade1').fadeIn(450).delay(3000).fadeOut(450, function(){show2();});
}

function show2() {
    $('a#fade2').fadeIn(450).delay(3000).fadeOut(450, function(){show1();});
}


$().ready(function() {
    show1();
});​