Javascript:文本更改之间的交叉淡入淡出文本？

Question

我一直在尝试各种各样的事情，但作为 javascript 和 jquery 的新手，我似乎无法获得像这样工作一样微不足道的东西。我下面的代码可以正常工作，但我希望它能够在更改之间平滑地淡入淡出。

var texts = ["One", "Two", "Three", "Four"];
var count = 0;
function addText() {
    $("#user").text(texts[count]).fadeOut();
    $("#user").text(texts[count]).fadeIn();
    count < 4 ? count++ : count = 0;
}
setInterval(addText, 500);

Answer 1

var texts = ["One", "Two", "Three", "Four"];
var count = 0;
function addText() {
    $("#user").text(texts[count]).fadeOut().delay(1).fadeIn();
    count < 4 ? count++ : count = 0;
}
setInterval(addText, 500);

更新:

一个改进的函数，它从@adricadar 那里获取了一些提示

var texts = ["One", "Two", "Three", "Four"];
var count = 0;
var interval = 2000;

function addText() {
    $("#user").fadeTo(interval/2 -1, 0.01, function(){
       // this callback runs when fadeOut is finished
       // so that the text change is "invisible"
       $(this).text(texts[count]); 
    }).delay(1).fadeTo(interval/2, 1);
    // Note that arrays are zero indexed so "Four" would blink twice. 
    count < texts.length ? count++ : count = 0; 
}
setInterval(addText, interval);

http://jsfiddle.net/736vb5tk/1/