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); 

我想要做的是，展现一个个数组的元素。但是，上面的函数只显示了数组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(); 

演示：http://jsfiddle.net/mattball/wALfP/

Answer 2

在jQuery中，你不能以你自己的方式交织动画和非动画并期望他们以正确的顺序运行。动画将进入动画队列并在那里依次排序，但非动画将立即运行。因此，事情不会以正确的顺序发生。

要做类似你想做的事情，你可以使用这样的代码。

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); 

如果你想下一次迭代开始前的延迟，你可以做，像这样用的setTimeout：

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循环执行完毕DIV有机会褪色之前出。使用一个if声明和递归：

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

while循环结束得很快;相反，您应该等待动画完成后再开始下一个动画。通过向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/