CODEWITHSUNDEEP
jquerysettimeoutfadeinfadeout
Alexander Kim
Alexander Kim

Reputation: 18401

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..

Upvotes: 2

Views: 4667

Answers (5)

calebds
calebds

Reputation: 26228

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

Upvotes: 5

jfriend00
jfriend00

Reputation: 707716

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

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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.

Upvotes: 2

Gavriel
Gavriel

Reputation: 19237

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

Upvotes: 1

ZERO
ZERO

Reputation: 133

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

Upvotes: 0

Related Questions