jQuery fadeOut ne fonctionne pas en boucle

Question

J'essaie d'implémenter ce script qui ajoutera des mots d'un tableau sur une étiquette <p>, qui, une fois complétée, remplacera la phrase complète par une autre expression, puis recommencera. Le problème que j'obtiens est lors de l'application d'un effet de fondu lors de la transition hors de la deuxième phrase et de retour dans l'ajout de la première phrase qui a un effet de fondu. Sans l'effet de fondu, il fonctionne comme prévu mais lorsqu'il est inclus, il ne rebouclera pas au début. Quelqu'un peut-il m'aider à comprendre pourquoi l'effet de fondu encombre le code et comment le faire fonctionner avec l'effet de fondu.

Voici le code cassé:

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>

Voici le code sans fondu effet:

var index = 0; 
 
Start(); 
 

 
function Start() { // DOM ready 
 
    var str = ["We Listen", ", We Plan", ", We Advise", ", We 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 you need for a 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>

Answer 1

C'est parce que vous avez .hide() collé à la fin de la déclaration reset dans l'exemple cassé. Si vous supprimez cet appel de méthode, le code se bloque correctement.

Solution de travail:

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>