Javascriptの機能は、アレイ

Question

の最後の要素だけを示して、この機能を見てみてください。

var msgdiv, i=0; 
msgdiv=$("#message"); 
messages=["Welcome!","Добро пожаловать!"]; 
function fadeMessages(messages, div){ 
    while(i<messages.length){ 
     div.fadeOut(1000).html('').append(messages[i]).fadeIn(1000); 
     i=i+1; 
    } 
} 
fadeMessages(messages,msgdiv); 

私は何をしたい配列の1つの要素ずつを表示すること、です。しかし、上記の関数は配列messages.lengthの最後の要素のみを表示します。私が間違っていた場所？

ライブ例：http://jsfiddle.net/QQy6X/

Answer 1

whileはfadeOut/fadeIn呼び出しよりも高速ずっと多くを実行するので、あなただけの最後の結果を参照してください。前のアニメーションが終了するのを各アニメーションが待つようにする必要があります。

私はこれらの問題を再帰的に解決したいと思います。これは、messages配列を変更することに注意してください。ただし、これを（元のバージョンのように）代わりに使用するように変換するのは難しくありません。ここに行く：

var $msgdiv = $('#message'), 
    messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!']; 

function showNext() { 
    var msg = messages.shift(); 
    if (msg) { 
     $msgdiv.fadeOut(1000, function() { 
      $(this).text(msg).fadeIn(1000, showNext); 
     }); 
    } 
} 

showNext(); 

デモ：http://jsfiddle.net/mattball/Exj95/

---

はここでそのままmessagesを残したバージョンです：

var $msgdiv = $('#message'), 
    messages = ['Xoş gəlmişsiniz!', 'Welcome!', 'Добро пожаловать!'], 
    i = 0; 

function showNext() { 
    if (i < messages.length) { 
     var msg = messages[i]; 
     $msgdiv.fadeOut(1000, function() { 
      i++; 
      $(this).text(msg).fadeIn(1000, showNext); 
     }); 
    } 
} 

showNext(); 

デモ：jQueryのでhttp://jsfiddle.net/mattball/wALfP/

Answer 2

、することはできませんあなたがdoiである方法でアニメーションとアニメーションを絡み合わせるそれらが正しい順序で実行されることを期待してください。アニメーションはアニメーションキューに入り、そこから次々とシーケンスされますが、アニメーション以外はすべてすぐに実行されます。従って、物事は正しい順序で起こらないでしょう。

あなたがやりたいようにするには、このようなコードを使用できます。

messages=["Welcome!","Добро пожаловать!"]; 

function fadeMessages(msgs, div) { 
    var i = 0; 
    function next() { 
     if (i < msgs.length) { 
      div.fadeOut(1000, function() { 
       div.html(msgs[i++]).fadeIn(1000, next); 
      }); 
     } 
    } 
    next(); 
} 

fadeMesssages(messages, div); 

これは、次のステップを実行するfadeIn()と​​両方の完了機能を使用します。動作方法は次のとおりです。

1. divをフェードアウトします。
2. fadeOutの完了機能では、次のメッセージを設定してからfadeInを開始します。
3. メッセージカウンタを進めます。
4. fadeInの完了関数では、次の繰り返しを開始する関数を呼び出します。あなたがフェードアウト（与えられたメッセージは、一定時間表示を確認する）までの遅延時間が必要な場合

は、あなたは正しい場所に追加この.delay(2000)とそれを追加することができます。

messages=["Welcome!","Добро пожаловать!"]; 

function fadeMessages(msgs, div) { 
    var i = 0; 
    function next() { 
     if (i < msgs.length) { 
      div.delay(2000).fadeOut(1000, function() { 
       div.html(msgs[i++]).fadeIn(1000, next); 
      }); 
     } 
    } 
    next(); 
} 

fadeMesssages(messages, div); 

div要素がフェードする機会があった前

messages=["Welcome!","Добро пожаловать!"]; 

function fadeMessages(msgs, div) { 
    var i = 0; 
    function next() { 
     if (i < msgs.length) { 
      div.fadeOut(1000, function() { 
       div.html(msgs[i++]).fadeIn(1000, function() { 
        setTimeout(next, 2000); 
       }); 
      }); 
     } 
    } 
    next(); 
} 

fadeMesssages(messages, div); 

Answer 3

あなたwhileループの実行が終了：あなたは次の反復を開始するまでの遅延時間が必要な場合は、setTimeoutを持つこのようにそれを行うことができますでる。あなたのwhileループは非常に迅速に終了

var msgdiv = $("#message"); 
var i = 0; 
var messages = ["Welcome!", "Добро пожаловать!"]; 
(function fadeMessages() { 
    if (i in messages) { 
     msgdiv.fadeOut(1000, function() { 
      $(this).html('').append(messages[i++]).fadeIn(1000, fadeMessages); 
     }); 
    } 
})(); 

http://jsfiddle.net/QQy6X/6/

Answer 4

;：ifの文と再帰を使用します代わりに、次のアニメーションを開始する前にアニメーションが終了するのを待つ必要があります。これは、fadeInにコールバック関数を追加することで簡単に実行できます。私はこれを使用します。

+function(){ 
    var $msgdiv = $("#message"); 
    var i = -1; 
    var messages = ["Xoş gəlmişsiniz!","Welcome!","Добро пожаловать!"]; 

    +function fadeNext(){ 
     $msgdiv.fadeOut(1000, function(){ 
      $msgdiv.text(messages[i = (i + 1) % messages.length]); 
      $msgdiv.fadeIn(1000, fadeNext); 
     });   
    }(); 
}(); 

http://jsfiddle.net/Paulpro/QQy6X/7/