使用JQuery在Javascript中显示淡入淡出文本的递归函数

我试图创建一个函数speak（），该函数递归地运行在一个字符串数组中，淡入淡出每个字符串，然后进入下一个字符串。以下是我的代码：

  function speak(num, arr, length, time)
  {
    if(num < length)
    {
      var string = arr[num];
      $("#maintext").text(string);
      $("#maintext").fadeIn(time, function ()
      {
        $("#maintext").fadeOut(time, speak(num+1, arr, length, time));
      });
    }
  }

函数讲话（num，arr，length，time）
{
if（num<长度）
{
变量字符串=arr[num]；
$（“#maintext”）.text（字符串）；
$（“#maintext”）.fadeIn（时间、函数）
{
$（“#maintext”）.fadeOut（时间，讲话（num+1，arr，length，time））；
});
}
}

我遇到的问题是，字符串淡入，切换到下一个字符串，然后淡出。我希望它淡入淡出，然后切换到下一个字符串，而#maintext是不透明的。无论我用这个函数做什么尝试，我都无法找出哪里出了问题

它会打印每个字符串，转换正好在错误的位置

JFiddle，尽管我根本无法让JFiddle工作（我想我可能格式化错误）。

---

这应该对您有所帮助。我没有先设置

.text

，而是淡出元素，然后交换文本，然后淡入。当您运行下面的代码段时，您将看到它可以工作。它还非常方便，它使用提供给

#maintext

元素的文本内容作为初始文本。您还将看到，最后一个字符串是在完成对数组的递归后仍然显示的字符串

使用您的代码，

#maintext

将始终以一个

fadeOut

结束，这意味着显示所有字符串后，

#maintext

将始终不可见

const speak=（$elem，time，[x，…xs]）=>{
如果（x==未定义）返回null；
$elem.fadeOut（时间，（）=>{
$elem.text（x）.fadeIn（时间，（）=>{
说话（$elem，time，xs）
})
})
}
让字符串=['foo'，'bar'，'baz'，'bof']
说话（$（'maintext'），1000，字符串）

初始化

这应该对您有所帮助。我没有先设置

.text

，而是淡出元素，然后交换文本，然后淡入。当您运行下面的代码段时，您将看到它可以工作。它还非常方便，它使用提供给

#maintext

元素的文本内容作为初始文本。您还将看到，最后一个字符串是在完成对数组的递归后仍然显示的字符串

使用您的代码，

#maintext

将始终以一个

fadeOut

结束，这意味着显示所有字符串后，

#maintext

将始终不可见

const speak=（$elem，time，[x，…xs]）=>{
如果（x==未定义）返回null；
$elem.fadeOut（时间，（）=>{
$elem.text（x）.fadeIn（时间，（）=>{
说话（$elem，time，xs）
})
})
}
让字符串=['foo'，'bar'，'baz'，'bof']
说话（$（'maintext'），1000，字符串）

初始化

函数讲话（num、arr、length、time）
{
log（“Speak:+num”）；
if（num<长度）
{
变量字符串=arr[num]；
$（“#maintext”）.text（字符串）.promise（）.done（函数（））{
$（“#maintext”）.fadeOut（时间、函数）
{
如果（num！=长度-1）
$（“#maintext”）.fadeIn（时间，讲话（num+1，arr，length，time））；
});
});
}
}

尝试用此替换speak功能。我已经加上了。它只在插入值后执行淡出和淡出，我相信这会对您有所帮助：）

函数speak（num、arr、length、time）
{
log（“Speak:+num”）；
if（num<长度）
{
变量字符串=arr[num]；
$（“#maintext”）.text（字符串）.promise（）.done（函数（））{
$（“#maintext”）.fadeOut（时间、函数）
{
如果（num！=长度-1）
$（“#maintext”）.fadeIn（时间，讲话（num+1，arr，length，time））；
});
});
}
}

---

尝试用此替换speak功能。我已经加上了。它只在插入值后执行淡出和淡出，我相信这会对您有所帮助：）

非常有用。谢谢。@user2465510yw。如果您需要进一步的澄清，请告诉我。非常有帮助。谢谢。@user2465510yw。如果您需要进一步的澄清，请告诉我。

  function speak(num, arr, length, time)
  {
    console.log("Speak: " + num);

    if(num < length)
    {
      var string = arr[num];

      $("#maintext").text(string).promise().done(function(){

        $("#maintext").fadeOut(time, function ()
            {
            if(num != length-1)
                            $("#maintext").fadeIn(time, speak(num+1, arr, length, time));
            });
      });

      }
   }