jquery - jQuery在超时时淡入淡出

Question

这是一个很常见的问题，但我希望淡出一些文本，更改它然后再淡入。

到目前为止，我的代码是：

setTimeout(function(){
    $("#ilovequote").fadeOut( 500, function(){
     var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
    var rand = ilovequotes[Math.floor(Math.random() * ilovequotes.length)];
    $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn( 500);
    });
  }, 500);
});

但这由于某种原因不起作用。我正在寻求帮助，基本上我想要一个流畅的动画，只要足够长的时间来阅读这个词。

JS小提琴

http://jsfiddle.net/rJDWb/

Answer 1

你想要这样的东西吗？

var cnt = 0;
setInterval(function(){
cnt ==4 ? cnt=0:cnt++
    $("#ilovequote").fadeOut( 500, function(){
        var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
        var rand = ilovequotes[cnt];
        $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn( 500);
    });
},1000);

jsFiddle 演示在这里http://jsfiddle.net/BMBDd/2/

Answer 2

删除多余的});

setTimeout(function () {
    $("#ilovequote").fadeOut(500, function () {
        var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
        var rand = ilovequotes[Math.floor(Math.random() * ilovequotes.length)];
        $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn(500);
    });
}, 500);

[更新]：

在更新的 jsfiddle 中交换最后两行（第 7 行和第 8 行）

http://jsfiddle.net/samliew/rJDWb/2/