Javascript函数只显示数组的最后一个元素

请查看此功能：

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

我想做的是，逐个显示数组的元素。但是，上面的函数只显示数组消息的最后一个元素。长度时间。我哪里做错了

实时示例：

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

演示：

以下是一个保持邮件完整的版本：

演示：

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

演示：

以下是一个保持邮件完整的版本：

---

演示：

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

如果您希望在下一次迭代开始之前有一个延迟，可以使用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);

---

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

如果您希望在下一次迭代开始之前有一个延迟，可以使用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);

您的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);
        });
    } 
})(); 

您的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);
        });
    } 
})(); 

---

你的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);
        });        
    }();
}();

---

你的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);
        });        
    }();
}();

---

我不知道如何让每个动画等待上一个你需要刷新页面的动画，我的朋友-如何让它在fadein和fadeout之间延迟工作？学会搜索，伙计。我会给你一个提示：。让我们看看，我不知道如何让每个动画等待上一个动画，你需要刷新页面，我的朋友-如何让它在fadein和fadeout之间延迟工作？学会搜索，伙计。我会给你一个提示：。让我们来看看如何在下一次之前设置延迟？除了fadeIn和fadeOut时间之外，您的原始代码在每次迭代之间没有延迟，但我在我的答案中添加了两个新版本，延迟为2秒。第一个是在每次迭代开始时淡出之前。第二个是在下一个迭代开始之前。前者更容易，因为你可以直接使用。延迟。第二个使用setTimeout。如何在下一个之前设置延迟？您的原始代码在每次迭代之间没有延迟，除了fadeIn和fadeOut时间，但是我在我的答案中添加了两个新版本，延迟为2秒。第一个是在每次迭代开始时淡出之前。第二个是在下一个迭代开始之前。前者更容易，因为你可以直接使用。延迟。第二个使用setTimeout.com，如何在fadein和fadeout之间延迟工作？@TuralTeyyuboglu Add.delay1000；在fadeIn之后，像这样：如何让它在fadeIn和fadeout之间延迟工作？@TuralTeyyuboglu Add.delay1000；在fadeIn之后，像这样：