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

你的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 3

在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()和fadeOut()的完成功能来执行后续步骤。以下是它的工作原理：

淡出div。
在fadeOut的完成功能中，它设置下一条消息，然后启动fadeIn。
它推进了消息计数器。
在fadeIn的完成函数中，它调用函数开始下一次迭代。

如果您希望在fadeOut之前延迟（以确保给定消息显示一段时间），您可以在正确的地方添加.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 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/

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

4 个答案: