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

我一直在尝试各种各样的东西，但作为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);

var text=[“一”、“二”、“三”、“四”]；
var计数=0；
函数addText（）{
$（“#用户”）.text（text[count]）.fadeOut（）；
$（“#用户”）.text（text[count]）.fadeIn（）；
计数<4？计数++：计数=0；
}
设置间隔（addText，500）；
var text=[“一”、“二”、“三”、“四”]；
var计数=0；
函数addText（）{
$（“#用户”）.text（text[count]）.fadeOut（）.delay（1.fadeIn（）；
计数<4？计数++：计数=0；
}
设置间隔（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);

var text=[“一”、“二”、“三”、“四”]；
var计数=0；
var区间=2000；
函数addText（）{
$（“#用户”）.fadeTo（间隔/2-1，0.01，函数（）{
//此回调在淡出完成时运行
//因此，文本更改是“不可见的”
$（this）.text（text[count]）；
}).延迟（1）。fadeTo（间隔/2，1）；
//请注意，数组的索引为零，因此“四”将闪烁两次。
计数

var text=[“一”、“二”、“三”、“四”]；
var计数=0；
函数addText（）{
$（“#用户”）.text（text[count]）.fadeOut（）.delay（1.fadeIn（）；
计数<4？计数++：计数=0；
}
设置间隔（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);

var text=[“一”、“二”、“三”、“四”]；
var计数=0；
var区间=2000；
函数addText（）{
$（“#用户”）.fadeTo（间隔/2-1，0.01，函数（）{
//此回调在淡出完成时运行
//因此，文本更改是“不可见的”
$（this）.text（text[count]）；
}).延迟（1）。fadeTo（间隔/2，1）；
//请注意，数组的索引为零，因此“四”将闪烁两次。
计数

在这里，我附加了一个基于您的代码的演示链接

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

var text=[“一”、“二”、“三”、“四”]；
var计数=0；
var区间=2000；
函数addText（）{
$（“#用户”）.text（text[count]）.fadeOut（间隔/2）；
$（“#用户”）.text（text[count]）.fadeIn（间隔/2）；
计数<4？计数++：计数=0；
}
setInterval（addText，interval）；
在这里，我附加了一个基于您的代码的演示链接

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

var text=[“一”、“二”、“三”、“四”]；
var计数=0；
var区间=2000；
函数addText（）{
$（“#用户”）.text（text[count]）.fadeOut（间隔/2）；
$（“#用户”）.text（text[count]）.fadeIn（间隔/2）；
计数<4？计数++：计数=0；
}
setInterval（addText，interval）；
诀窍是对
淡出方法使用回调

$("#user").text(texts[count])
  .fadeOut( interval/2,
            function(){$("#user").text(texts[count]).fadeIn(interval/2);} );

诀窍是对
淡出方法使用回调

$("#user").text(texts[count])
  .fadeOut( interval/2,
            function(){$("#user").text(texts[count]).fadeIn(interval/2);} );

这非常有效！我想我错过了延迟，但我如何才能做到这样，使它上面和下面的文本不会在上下跳跃时闪烁？确保它们具有CSS属性
display:none
。缺少的是，当您选择一个元素两次并添加动画时，动画会同时运行。当你链接动画并添加延迟时，它会同步运行（一个接一个）。我误解了你所说的“上面和下面的文本不会闪烁”的意思。你所能做的就是确保
#user
有一个设定的高度，我还将动画改为使用FadeThat，效果非常好！我想我错过了延迟，但我如何才能做到这样，使它上面和下面的文本不会在上下跳跃时闪烁？确保它们具有CSS属性
display:none
。缺少的是，当您选择一个元素两次并添加动画时，动画会同时运行。当你链接动画并添加延迟时，它会同步运行（一个接一个）。我误解了你所说的“上面和下面的文本不会闪烁”的意思。您可以做的是确保
#user
具有设置的高度，并且我还将动画更改为使用fadeNice，但看起来文本更改是在其完全不透明度时发生的。我更新了你的小提琴不错，但它看起来像文字变化时发生的完全不透明。我更新了你的小提琴