jquery fade in at same time as fade out

Question

I'm stuck and I really don't udnerstand jQuery right now!

I want my 3 blocks to fade in a fade out with 3 second delay, in a loop.

This works but I want block 1 to fade out WHILST block 2 is fading in, and not afterwards.

And block 2 to fade out WHILST block 3 is fading in ... and so on!

$(".block2").fadeTo("fast", 0.3)
$(".block3").fadeTo("fast", 0.3)

function1();

var timing = 3000;

function function1(){
$(".block1").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function2);
}

function function2(){
$(".block2").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function3);
}

function function3(){
$(".block3").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function1);
}

Thank you =)

Answer 1

Just give all your blocks a common .block

jsBin demo

var el = $('.block'),
    F = 800,   // FADE TIME
    P = 3000,  // PAUSE TIME
    S = -1;    // START el index (will turn 0 after initial kick)
    
function a(){el.eq(++S%el.length).fadeTo(F,1).siblings(el).stop(1).fadeTo(F,0.3);}
a();

setInterval(a, P);

Answer 2

The issue is that you are triggering the next step using the callback function of the fadeOut action. So the next fadeIn happens after the fadeOut has completed. Instead you want the fadeIn to occur after the delay. You can use the queue method to achieve this:

.delay(timing).queue(function() {
  function2();
  $(this).dequeue(); // Keeps the queue running, it stops if you don't do this
}).fadeOut("slow", 0.3);

I have created a fiddle here http://jsfiddle.net/e8W5E/ to show it in action

---

Edit In response to roXon's comments, you could write the solution to be more elegant as follows. The HTML is updated to remove the redundant count...

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

The jQuery then looks like...

$(function() {

  // These are the elements we will rotate
  var $blocks = $(".block");

  // Set up the initial elements to 0.3 opacity
  $blocks.not(":eq(0)").fadeTo("fast", 0.3);

  // This is our repeating function
  var go = function($el, i, high, low, t) {
    $el.eq(i).fadeTo("slow", high)
      .delay(t)
      .queue(function() {

        // The next index is 1 + the current index
        // use modulus to repeat back to the beginning
        var next = (i + 1) % $el.length;
        go($el, next, high, low, t);
        $(this).dequeue();
       })
       .fadeTo("slow", low);
  };

  // Start fading in and out
  go($blocks, 0, 1, 0.3, 1000);

})();

You can add as many blocks as you like with that class name and it will be included in the fadeIn and fadeOut rotation. And fiddle http://jsfiddle.net/e8W5E/1/

Answer 3

You are using callbacks. Callbacks wont occurring until the fade out is finished. But we can use a timeout to call both at the same time.

$(".block2").fadeTo("fast", 0.3)
$(".block3").fadeTo("fast", 0.3)

function1();

var timing = 3000;

function function1(){
    $(".block1").fadeTo("slow", 1, function(){
         setTimeout(function(){
             function2();
         }, timing);
    }).delay(timing).fadeTo("slow", 0.3);

}

Or curry style:

var function1, function2, function3;

function1 = fadeInnyOuty( $('.block1'), function2);
function2 = fadeInnyOuty( $('.block2'), function3);
function3 = fadeInnyOuty( $('.block3'), function1);

function fadeInnyOuty($elem,func){
    $elem.fadeTo("slow", 1, function(){
         setTimeout(function(){
             func();
             $elem.fadeTo("slow", 0.3);
         });
    });
}