javascript - 使用 jquery 在每次淡入时呈现新单词

Question

我该如何解决这个问题？我在屏幕上重复显示了一个单词，并用 fadeIn.delay.fadeOut 表示。如果我从数组中随机选择这个单词，它的行为并不完全符合我的要求。

我想要这个单词，将其淡出，然后让新单词淡入。现在，“单词更改”似乎发生得太快，请参阅 example on fiddle

代码:

var words = ["A", "B", "C", "D"];
var showwords = function() {
var newword = words[Math.floor((Math.random() * words.length))]
$("#words").text(newword)
            .fadeIn(50)
            .delay(2000)
            .fadeOut(500);
}
setInterval(showwords, 2000)

谁能帮我解决这个问题吗？

Answer 1

http://jsfiddle.net/8VHR5/3/

我认为您的原始代码没有正确排队淡出、延迟和淡入。使用 fadeOut 的回调函数尝试这样，以便下一段代码仅在完成后执行。

var words = ["A", "B", "C", "D"];
var showwords = function() {
    var newword = words[Math.floor((Math.random() * words.length))]
    $("#words").fadeOut( 1000, function() {
         $("#words").text(newword).fadeIn(1000);
    });
}
setInterval(showwords, 3000)