Text fadein/fadeout animation in loop

Question

I am trying to create simple animation in loop but every time it works wrong.

How should it work?

Test 1 fadein, wait 2 seconds and

Test 2 fadein, wait 2 seconds and

Test 3 fadein, wait 2 seconds and

Test 4 fadein, wait 2 seconds and

fadeout Test 1, Test 2, Test 3, Test 4 at the same time (important, I can't achieve this)

then

Test 5 fadein, wait 2 seconds and

Test 6 fadein, wait 2 seconds and

Test 7 fadein, wait 2 seconds and

Test 8 fadein, wait 2 seconds and

fadeout Test 5, Test 6, Test 7, Test 8 at the same time (important, I can't achieve this)

loop all process.

My html code:

<div class="col-md-12 slogan text-right">
    <h1 class="slogan1">test 1</h1>
    <h1 class="slogan2">test 2</h1>
    <h1 class="slogan3">test 3</h1>
    <p  class="slogan4">test 4</p>

    <h1 class="slogan5">test 5</h1>
    <h1 class="slogan6">test 6</h1>
    <h1 class="slogan7">test 7</h1>
    <p class="slogan8">test 8</p>
</div>

And here is my JS:

$(document).ready(function() {

        var cycle;

        (cycle = function() {
            $('.slogan1').delay(1000).fadeIn(3000);
            $('.slogan2').delay(3000).fadeIn(3000);
            $('.slogan3').delay(5000).fadeIn(3000);
            $('.slogan4').delay(7000).fadeIn(3000);
            $('.slogan1, .slogan2, .slogan3, .slogan4').delay(10000).fadeOut(3000);

            $('.slogan5').delay(13000).fadeIn(3000);
            $('.slogan6').delay(15000).fadeIn(3000);
            $('.slogan7').delay(17000).fadeIn(3000);
            $('.slogan8').delay(19000).fadeIn(3000);
            $('.slogan5, .slogan6, .slogan7, .slogan8').delay(21000).fadeOut(3000);

        })();
    });

Answer 1

Here is a different approach, which kind of works like a plugin, with options:

/* The cycle function performs successive fadeIns using the provided selectors
 * and finishes by fading them all out, and executing a provided callback
 */
function cycle(options) {
  var settings = {
    'selectors': options.selectors || [],
    'remaining': options.selectors.slice().reverse() || [],
    'delay'    : options.delay || 1000,
    'duration' : options.duration || 3000,
    'complete' : options.complete || function() {}
  };

  cycleStep();

  function cycleStep() {
    if(!settings.remaining.length){
        var callbackExecuted = false;
        $( settings.selectors.join(', ') ).delay(settings.delay)
                                          .fadeOut(settings.duration, function(){
                                            if(!callbackExecuted){
                                                settings.complete();
                                                callbackExecuted = true;
                                              }
                                          });
    }
    else
        $( settings.remaining.pop() ).delay(settings.delay)
                                     .fadeIn(settings.duration, cycleStep);
  }
}

/* This function will loop the cycles with the options you provide it */
function myLoop(){
  cycle({
    selectors: ['.slogan1', '.slogan2', '.slogan3', '.slogan4'],
    complete: function() {
      cycle({
        selectors: ['.slogan5', '.slogan6', '.slogan7', '.slogan8'],
        complete: myLoop
      });
    }
  });
}

// Execute the loop
myLoop();

JS Fiddle Demo