Question

I have made a simple loop that makes div#1 fade in/out and then div#2 fade in/out
The code i have written is like this:

function runToggle(iDuration, domFirst,domSecond) {
        $(domFirst).fadeToggle(iDuration, "linear",function() {
          $(domFirst).fadeToggle(iDuration, "linear",function() {
            $(domSecond).fadeToggle(iDuration,"linear",function() {
              $(domSecond).fadeToggle(iDuration,"linear",function() {
                  setTimeout(function() {
                      runToggle(iDuration, domFirst,domSecond) ;
                  },50);
              });
            }); 
          });
       }); 
};

runToggle(2000, $('#box1'),$('#box2'));

But i cant seem to make a delay inbetween each fade in and out… (logically what i want is this: div1 Fade in, Delay, div1 Fade out, div2 fade in, delay, div2 fade out and then start all over again.

Answer 1

JQuery has a built in .delay() function. (see the docs)

Change all of these lines:

$(domFirst).fadeToggle(iDuration, "linear",function() {

to:

$(domFirst).delay(200).fadeToggle(iDuration, "linear",function() {