setInterval中的jQuery停止功能

Question

How to stop the execution of firstShow after each Interval.I want it to begin from 0.

var firstShow = function(){

             $("#i_can").delay(2000).fadeIn(300);

            $( "#me" ).delay( 4000).fadeIn( 300 );

            $( "#horizons" ).delay( 6000 ).fadeIn(300);

              .....      

        }

    firstShow()   
    var NewTextAgain = setInterval(firstShow,10000)

Answer 1

You can do something like this using callback function, that it will fire the function again only after completing all the effects

 $(document).ready(function() { $("#i_can").hide(); $("#me").hide(); $("#horizons").hide(); $("#team").hide(); $("#grow").hide(); $("#course").hide(); $("#celebrate").hide(); var i; var test = function() { i++; if (i == 14) firstShow(); } var firstShow = function() { i = 0; $("#i_can").delay(2000).fadeIn(300, test); $("#me").delay(4000).fadeIn(300, test); $("#horizons").delay(6000).fadeIn(300, test); $("#me").delay(4000).fadeOut(test); $("#horizons").delay(2000).fadeOut(test); $("#team").delay(10000).fadeIn(300, test); $("#course").delay(12000).fadeIn(300, test); $("#team").delay(4000).fadeOut(test); $("#course").delay(2000).fadeOut(test); $("#grow").delay(16000).fadeIn(300, test); $("#celebrate").delay(18000).fadeIn(test); $("#grow").delay(5200).fadeOut(test); $("#celebrate").delay(3100).fadeOut(test); $("#i_can").delay(19200).fadeOut(test); } firstShow(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="i_can" class="i_can">I can</h2> <h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="me">Challenge Myself</h2> <h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="horizons"> To Chart New Horizons</h2> <h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="team"> Challenge My Team</h2> <h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="course"> To Set New Courses</h2> <h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="grow">Grow With You</h2> <h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="celebrate">To Celebrate Success</h2> 

Answer 2

You are should hide the elements on each iteration

var firstShow = function() {
  $("#i_can, #me, #horizons").hide();
  $("#i_can").delay(2000).fadeIn(300);
  $("#me").delay(4000).fadeIn(300);
  $("#horizons").delay(6000).fadeIn(300);
}

firstShow();
var NewTextAgain = setInterval(firstShow, 10000);

Working example