JS/jQueryの非表示要素、変更テキスト、ショーの要素

Question

私は次のような経験を達成しようとしている：配列に格納された値にテキストが（ではないですか

変更を非表示にするには、テキストダウン

• スライド変更テキストテキストは完全に非表示にするまで）
• 起こっ保つ何

を表示するテキストをスライド要素が完全に隠される前にテキストが変更されています。ページロード時に実行される関数は次のとおりです。

var welcomeText = function() { 
var welcome = ["Bienvenue.", "Willkommen.", "Benvenuto.", "Bienvenido.", "Welkom", "欢迎", "Fáilte.", "Nau mai", "Welcome."], 
    title = $(".home-title"), 
    counter = 0; 

setInterval(function() { 
    title.animate({"bottom":"-100%"},200); 
    title.text(welcome[counter]); 
    counter++; 
    title.animate({"bottom":""},200); 
    if(counter >= welcome.length) { 
     counter = 0; 
    } 
}, 3000); 
} 

Answer 1

うわー、答えはただのインスピレーションのフラッシュのように私に来ました！私はテキストの変更に時間の遅れを加えなければならなかった。ここには実用的なソリューションがあります...

var welcomeText = function() { 
var welcome = ["Bienvenue.", "Willkommen.", "Benvenuto.", "Bienvenido.", "Welkom", "欢迎", "Fáilte.", "Nau mai", "Welcome."], 
    title = $(".home-title"), 
    counter = 0; 

setInterval(function() { 
    title.animate({"bottom":"-100%"},200); 
    setTimeout(function() { 
     title.text(welcome[counter]); 
    }, 200); 
    counter++; 
    title.animate({"bottom":""},200); 
    if(counter >= welcome.length) { 
     counter = 0; 
    } 
}, 3000);} 

Answer 2

アニメーション機能の完全パラメータを使用します。関数内のコードは、アニメーション関数が終了したときにのみ実行されます。

title.animate({"bottom":"-100%"},200,function() { 
    title.text(welcome[counter]); 
    counter++; 
    title.animate({"bottom":""},200); 
    if(counter >= welcome.length) { 
    counter = 0; 
    } 
});