javascript - Text fadein/fadeout animation in loop -

i trying create simple animation in loop every time works wrong.

how should 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 @ same time (important, 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 @ same time (important, can't achieve this)

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

here different approach, kind of works plugin, options:

/* cycle function performs successive fadeins using provided selectors  * , finishes fading them out, , executing 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);   } }  /* function loop cycles options provide */ function myloop(){   cycle({     selectors: ['.slogan1', '.slogan2', '.slogan3', '.slogan4'],     complete: function() {       cycle({         selectors: ['.slogan5', '.slogan6', '.slogan7', '.slogan8'],         complete: myloop       });     }   }); }  // execute loop myloop(); 

js fiddle demo