JQuery fade with loop and delay

Question

I have 2 Divs stacked on top of each other.

I need a really simple function that will:

a) Wait for 3 seconds and then b) FadeOut the top Div to reveal the se

Answer 1

if the two divs have ids of "id1" and "id2", and id2 is the upper one then the code would be like:

function fadeIn() {
  $("id2").animate({opacity:0},500);
  setTimeout(fadeOut,3500);
}

function fadeOut() {
  $("id2").animate({opacity:1},500);
  setTimeout(fadeIn,3500);
}

function startAnim() {
  setTimeout(fadeIn,3000);
}

startAnim() starts the animation cycle , which you should call @ the start. Then fadeIn & Out keep animating id2 and setting timeouts for each other. The delay is 3500 , as you wanted 3 seconds of delay (ie. 3000ms) and 500 for the previous animation to complete. This could have been done using a callback on animate , but that's more messy.

Answer 2

Here's an attempt.

function foo() {
    jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 1.0}, {duration: 3000, complete: foo})
}

Note: To pause, just call animate over a property with the same target value as it is right now. The last animate calls the the same function as callback.

PS: Does it cause stack overflow over time?

Answer 3

This attempt uses a small cookbook function wait from jquery.com.

The function doFading assumes the id of the top div to be "a4".

function doFading() {
      $("#a4").wait(3000)
      .fadeOut("slow")
      .wait(3000)
      .fadeIn("slow",doFading);
    }

$.fn.wait = function(time, type) {
        time = time || 1000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    };

Answer 4

no one may ever see this, but just in case...

<script>
$(document).ready(function() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>

this is without looping it though....

That would be

<script>
$(document).ready(function() {
    function animate(){
        $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
        $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);    
    }
    animate();  
    setInterval(animate, 10000);
}); 
</script>

Answer 5

IF you also want to have it xfade. Use floyed's script but make the changes that I have used. Only problem is your first image you want shown should be the second one in the li elements

$(document).ready(function() {

         var j = 0;
         var delay = 5000; //millisecond delay between cycles
         function cycleThru(){
                 var jmax = $("ul#cyclelist li").length -1;
                 $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "1"} ,1000)
                         .animate({"opacity" : "1"}, delay);
             $("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000);    
             $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "0"}, 1000, function(){
                                 (j == jmax) ? j=0 : j--;
                                 cycleThru();
                         });
                 };

         cycleThru();

 });

Answer 6

I know this is old, but I thought I would share what I did to accomplish this

$(document).ready(function() {
    var delay = 500;
    $("#mydiv").bind('fadein', function()
    {
        $(this).fadeOut(1000, function()
        {
            $(this).delay(delay).trigger('fadeout');
        });
    });

    $("#mydiv").bind('fadeout', function()
    {
        $(this).fadeIn(1000, function()
        {
            $(this).delay(delay).trigger('fadein');
        });
    });

    $("#mydiv").fadeIn(1000, function()
    {
        $(this).trigger("fadein");
    });
});

then call this when you want it to stop

$("#mydiv").stop().hide();