1
我試圖執行這個腳本，它會將數組中的單詞附加到<p>標記上，當完成時它將用另一個短語替換整個句子，然後重新開始。jQuery fadeout在循環時不工作
我得到的問題是，當從第二個短語過渡到應用淡出效果並返回添加淡出效果的第一個短語時。如果沒有淡出效果，它會按預期工作，但包含它時不會循環回到開始。
任何人都可以幫助我找出淡出效果爲什麼會弄亂代碼，以及如何使它與淡出效果一起工作。
這裏是斷碼：
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>這裏是沒有淡出效果代碼：
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>