Jquery sequential fadeIn and FadeOut - same place

Question

I have three images and I would like them to

First Image: fadeIn, wait a while, then fadeOut; Second Image: (on the same place) fadeIn, wait a while, then fadeOut; Third Image: (on the same place) fadeIn, wait a while, then fadeOut;

//do something...

I have this stupidity so far.

 $(document).ready(function() {

            $('#imagemIntro1').fadeIn(3800);

            setTimeout(function() {
            $('#imagemIntro1').fadeOut(3800); }, 8000);



            $('#imagemIntro2').fadeIn(3800);

            setTimeout(function() {
            $('#imagemIntro2').fadeOut(3800); }, 8000);




            $('#imagemIntro3').fadeIn(3800);

            setTimeout(function() {
            $('#imagemIntro3').fadeOut(3800); }, 8000);


            window.location.replace("http://www.something.com");


        });

Can I have your help please?

I would love to learn how to do this, without a specific plugin... :D "I'm running out of time, so, I will use the suggested plugin since, this is really nothing special."

Thanks in advance, MEM

Answer 1

Looks like you are on the right track to cycle through some images. However, there is nothing in your description that seems to be a special requirement. Therefore, I would strongly recommend the jQuery Cycle plugin.

If you want to do it yourself, update your OP.

Answer 2

What you want to do is use callbacks to do this. You end up with a pretty ugly chain, but it works. It would look something like this:

function fadeInNowAndOutLater(sel, callback) {
    $(sel).fadeIn(3800, function() {
        window.setTimeout(8000, function(){$(sel).fadeOut(3800, callback);})
    });
}

fadeInNowAndOutLater('#imagemIntro1', function() {
    fadeInNowAndOutLater('#imagegIntro2', function(){
        fadeInNowAndOutLater('#imagegIntro3', function(){
            // do something...
        });
    });
});