1
配列の単語を<p>タグに追加するこのスクリプトを実装しようとしています。完了したら、完全な文を別の語句に置き換えてからやり直します。ループ時にjQuery fadeOutが機能しない
問題は、フェードアウト効果を適用して2番目のフレーズから移行し、フェードインした最初のフレーズを追加するときです。フェードアウトエフェクトがなければ、期待どおりに機能しますが、含まれていると、ループバックして開始しません。
フェードアウトエフェクトがコードを混乱させる理由とフェードアウトエフェクトを使用する方法を理解できたら助けてくれる人がいますか？ここで
は壊れコードです：ここでは
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>