javascript - jQuery fadeOut not working when looping -

i'm trying implement script append words array onto <p> tag, when completed replace full sentence phrase , start on again.

the problem getting when applying fade out effect when transitioning out of second phrase , appending first phrase has fade in effect. without fade out effect, works expected when included not loop start.

can me figure out why fade out effect messes code , how working fade out effect.

here broken code:

var index = 0;  start();    function start() { // dom ready    var str = ["first", ", second", ", third", ", fourth."];    var spans = '<span>' + str.join('</span><span>') + '</span>';    $(spans).hide().appendto('#motto').each(function(i) {      $(this).delay(2000 * i).fadein('slow', 'swing', function() {        if (index == 3) {          settimeout(restart, 2000);        } else {          index++;        }      });    });  }    function restart() {    $('#motto').fadein('slow', 'swing', function() {      var div = $("<p id='motto'>second phrase.</p>").hide();      $('#motto').replacewith(div);      $('#motto').fadein("slow", 'swing', function() {        settimeout(function() {          var reset = $("<p id='motto'></p>").hide();          $('#motto').replacewith(reset).fadeout('slow', 'swing', function() {            index = 0;            start();          });        }, 3000);      });    });  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p id="motto"></p>

here code without fade out effect:

var index = 0;  start();    function start() { // dom ready    var str = ["we listen", ", plan", ", advise", ", deploy."];    var spans = '<span>' + str.join('</span><span>') + '</span>';    $(spans).hide().appendto('#motto').each(function(i) {      $(this).delay(2000 * i).fadein('slow', 'swing', function() {        if (index == 3) {          settimeout(restart, 2000);        } else {          index++;        }      });    });  }    function restart() {    $('#motto').fadein('slow', 'swing', function() {      var secondphrase = $("<p id='motto'>everything need successful implementation.</p>").hide();      $('#motto').replacewith(secondphrase);      $('#motto').fadein("slow", 'swing', function() {        settimeout(function() {          var reset = $("<p id='motto'></p>");          $('#motto').replacewith(reset);          index = 0;          start();        }, 3000);      });    });  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p id="motto"></p>

it's because have .hide() tacked on end of reset declaration in broken example. if remove method call, code loops fine.

working solution:

var index = 0;  start();    function start() { // dom ready    var str = ["first", ", second", ", third", ", fourth."];    var spans = '<span>' + str.join('</span><span>') + '</span>';    $(spans).hide().appendto('#motto').each(function(i) {      $(this).delay(2000 * i).fadein('slow', 'swing', function() {        if (index == 3) {          settimeout(restart, 2000);        } else {          index++;        }      });    });  }    function restart() {    $('#motto').fadein('slow', 'swing', function() {      var div = $("<p id='motto'>second phrase.</p>").hide();      $('#motto').replacewith(div);      $('#motto').fadein("slow", 'swing', function() {        settimeout(function() {          var reset = $("<p id='motto'></p>");          $('#motto').replacewith(reset).fadeout('slow', 'swing', function() {            index = 0;            start();          });        }, 3000);      });    });  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p id="motto"></p>