fadeOut first div then fadeIn second div

问题

got a problem i need to do something like a fading banner - one div fading out then second div fading in, here's the code:

$(document).ready(function() {
    setTimeout(function() {
        $('#zeus').fadeOut(1000);
     }, 5000);
    $('#zeuss').hide();
    setTimeout(function(){
        $('#zeuss').fadeIn(1000);
    }, 6000);
});

it works, but after #zeuss fades in then it just stays here. I need to do that repeatedly. And please don't offer to use .delay() because im on jquery 1.3.2

EDIT. by default #zeus is shown on the page, i want to fade it out then fade in #zeuss, then again fade in #zeus and then fade out #zeus and fade in #zeuss etc..

回答1:

As is often the case, a general and extensible solution is simpler:

UPDATE: Took jfriend00's suggestion and moved from multiple timers to completion function to preclude accumulation errors over time.

/**
 * Fade-cycles elements with class 'banner'
 */
$(document).ready(function() {

    var delay = 3000, fade = 1000; // tweak-able
    var banners = $('.banner');
    var len = banners.length;
    var i = 0;

    setTimeout(cycle, delay); // <-- start

    function cycle() {
        $(banners[i%len]).fadeOut(fade, function() {
            $(banners[++i%len]).fadeIn(fade, function() { // mod ftw
                setTimeout(cycle, delay);
            });
        });
    }

});

DEMO using jQuery 1.3.2

回答2:

I think you want to fadeIn and fadeOut 2 different div in an infinite roll. Try below code and let me know,

DEMO

$(document).ready(function() {
    var isZeuss = false;
    var $zeus = $('#zeus');
    var $zeuss = $('#zeuss');

    $zeuss.hide();

    setTimeout(function () {//<-- Not sure if you want this 5 sec delay in starting the animation
       setInterval(function() {
         var $fadeOutBanner = (isZeuss)?$zeuss:$zeus;
         var $fadeInBanner = (isZeuss)?$zeus:$zeuss;

         $fadeOutBanner.fadeOut(1000, function () {
             $fadeInBanner.fadeIn(1000);
             isZeuss = !isZeuss;
         });
       }, 2000);
     }, 5000); //<-- Not sure if you want this         
});

Edit: You can increase the fadeIn/fadeOut timer or the setInterval timer for slower transition.

回答3:

This one starts with one banner visible, then it starts fading out, in, delay, etc... http://jsfiddle.net/TtPFc/1/

#zeus { background-color: blue; color: white; display:none}
#zeuss { background-color: red; color: white; }


<div id="zeus">Zeus Banner</div>
<div id="zeuss">Zeuss Banner</div>


$(document).ready(function() {
    var zeus    =  $('#zeus'), 
        zeuss   =  $('#zeuss'),
        forward = true;

    setInterval(function() {
        if (forward) {
           zeus.fadeOut(1000, function() { zeuss.fadeIn(1000); });
        }
        else { 
           zeuss.fadeOut(1000, function() { zeus.fadeIn(1000); });
        }

        forward = !forward;

     }, 5000);
});

回答4:

Ok, without using .delay() and linking the start of one animation to the exact completion of the previous animation (without relying on the syncing of timers and animations) and implementing an animation with this repeating sequence:

zeus visible, zeuss not visible
Pause 5 sec
Fade Out zeus
Fade In zeuss
Fade Out zeuss
Fade In zeus
Repeat

You can do it like this:

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
        setTimeout(function() {
            z1.fadeOut(1000, function() {
                z2.fadeIn(1000).fadeOut(1000, function() {
                    z1.fadeIn(1000, cycle)
                });
            });
        }, 5000);
    }
    cycle();
});

If you only want the 5 second pause before the first cycle and not on the following cycles (something that was not completely clear to me in your question), it can be like this:

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
        z1.fadeOut(1000, function() {
            z2.fadeIn(1000).fadeOut(1000, function() {
                z1.fadeIn(1000, cycle)
            });
        });
    }
    // start the fadeIn/fadeOut cycling after 5 seconds
    setTimeout(cycle, 5000);
});

FYI, the choice of names zeus and zeuss is horribly confusing. It is very, very easy to get them confused and very easy to make mistakes in the code.

If you got on a more modern version of jQuery that could use .delay(), then it would be a little simpler:

$(document).ready(function() {
    var z1 = $('#zeus');
    var z2 = $('#zeuss').hide();

    function cycle() {
       z1.delay(5000).fadeOut(1000, function() {
           z2.fadeIn(1000).fadeOut(1000, function() {
               z1.fadeIn(1000, cycle)
           });
       });
    }
    cycle();
});

回答5:

What if you make a zeusfadeIn and zeusfadeOut? zeusfadeIn do fade in and call zeusfadeOut zeusfadeOut do fade out and call zeusfadeIn

来源：https://stackoverflow.com/questions/10194305/fadeout-first-div-then-fadein-second-div

标签

jquery

settimeout

fadein

fadeout