Javascript 加载延迟的逐字母动画

我正试图在带有两张幻灯片的部分中实现一个字母一个字母的动画。目前我正在使用jQuery代码，但恐怕这远远不是理想的选择。
下面是我的代码示例：

$.fn.animation=函数（）{
//获取欢迎消息元素
var$message=$（这个）；
//从欢迎文本中获取信件列表
var$getList=$（this.text（）.split（“”）；
//清除欢迎文本消息
$（此）.text（“”）；
//循环遍历列表数组中的字母
$.each（$getList，函数（idx，元素）{
//为字母创建跨距，并将“不透明度”设置为0
var newElement=$（“”）.文本（元素）.css({
不透明度：0
});
//将其附加到欢迎消息中
newElement.appendTo（$message）；
//为此元素设置动画的延迟
新元素延迟（idx*90）；
//将不透明度设置为完全1
newElement.animate({
不透明度：1
}, 1100);
});
};
$（'.introduction'）.animation（）；
$（'.secondary'）.animation（）；

第一个问题是我做不到，所以第二个句子是在第一个句子完成后才开始的。我已尝试使用.delay和setTimeout，但这没有帮助。
另外，我也不确定第二张幻灯片加载后如何启动动画。
我知道有用于这些东西的插件，但我想用vanilla JavaScript或jQuery、css3来实现这一点。
如果有任何帮助，我将非常高兴。
是的，这里有一个例子，我希望它看起来如何-
是否可以在幻灯片每次更改时制作动画以使动画开始？

---

谢谢

已编辑

单击以查看整个代码是否正常工作

我在css中所做的更改：我将html文本标记（

、

和

）的

不透明度设置为
0
，因此它们是隐藏的。然后在
动画
功能中，它们再次可见

我在脚本中所做的更改：以延迟方式启动第二个文本动画，我使用了
setTimeout（）
函数：

setTimeout(function(){
    $('.secondary').animation();
},2000);

要检测转盘的滑动事件，根据，您可以使用以下方法：

$('.carousel').on('slid.bs.carousel', function () {
  // here is where you start the animation for the second slide
})

重新编辑
为了跟踪我们在哪张幻灯片上，我引入了一个变量caled:
var$wichSlide
。以下是更改幻灯片时启动动画的工作方法：

$('.carousel').bind('slid.bs.carousel', function (e) {
    if($whichSlide == 1){
      //set $whichSlide position for the next slide event
      $whichSlide = 2
      //start to animate the text
      $('.introduction').animation();
      setTimeout(function(){
  $('.secondary').animation();
},2000);
      /*set the text on the second slide to be invisible
       * because we don't want it to appear before animation starts
       */
      $('.slide2').css("opacity",0);
    }else if($whichSlide == 2){
      $whichSlide = 1;
      $(".carousel").carousel("pause");
      $(".slide2").animation();
      setTimeout(function(){
       $(".carousel").carousel();
      },3000);
      $('.introduction').css("opacity",0);
      $('.secondary').css("opacity",0);
    }
});

我相信，
承诺
将是您的正确答案。检查这个：非常感谢。这正是我想要的。
$('.carousel').bind('slid.bs.carousel', function (e) {
    if($whichSlide == 1){
      //set $whichSlide position for the next slide event
      $whichSlide = 2
      //start to animate the text
      $('.introduction').animation();
      setTimeout(function(){
  $('.secondary').animation();
},2000);
      /*set the text on the second slide to be invisible
       * because we don't want it to appear before animation starts
       */
      $('.slide2').css("opacity",0);
    }else if($whichSlide == 2){
      $whichSlide = 1;
      $(".carousel").carousel("pause");
      $(".slide2").animation();
      setTimeout(function(){
       $(".carousel").carousel();
      },3000);
      $('.introduction').css("opacity",0);
      $('.secondary').css("opacity",0);
    }
});