JQuery последовательно FadeIn и FadeOut - то же самое место

Question

У меня есть три изображения, и я хотел бы, чтобы они

Первое изображение: fadeIn, подождите немного, затем fadeOut;Второе изображение: (в том же месте) fadeIn, подождите немного, затем fadeOut;Третье изображение: (там же) fadeIn, подожди немного, затем fadeOut;

// сделай что-нибудь ...

У меня пока такая глупость.

 $(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");


        });

Могу ли я получить вашу помощь, пожалуйста?

Я хотел бы узнать, как это сделать, без специального плагина ...: D "У меня заканчивается время, поэтому я буду использоватьпредложенный плагин с тех пор, это действительно ничего особенного. "

Заранее спасибо, MEM

Answer 1

Похоже, что вы находитесь на правильном пути, чтобы просмотреть некоторые изображения.Тем не менее, в вашем описании нет ничего, что, по-видимому, специальное требование.Поэтому я настоятельно рекомендую плагин jQuery Cycle .

Если вы хотите сделать это самостоятельно, обновите ваш OP.

Answer 2

То, что вы хотите сделать, это использовать обратные вызовы, чтобы сделать это. В итоге получается довольно уродливая цепь, но она работает. Это будет выглядеть примерно так:

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