无法正常使用Animate.css：文本切换器动画延迟与速度调优问题

嘿，刚接触jQuery和动画的话遇到这种问题很正常，我来帮你理一理～首先先提个小细节：你的原始HTML代码里有个语法错误——<span id="role"></div>这里<span>没闭合，还多了一个</div>，我已经在后面的代码里帮你修正啦！

接下来咱们说核心问题：你现在用的是jQuery自带的fadeIn/fadeOut，还没结合Animate.css实现你要的效果，而且delay()方法没生效是因为它只对jQuery的动画队列有效，直接用在文本切换后是不起作用的，咱们一步步改：

第一步：确保引入Animate.css #

首先要确保你已经在项目中引入了Animate.css的样式文件（可以通过本地文件引入或者官方提供的npm等安装方式添加）。

第二步：修改代码实现Animate.css动画+自定义控制 #

我们可以用Animate.css的进入/退出动画类，配合setTimeout来控制动画的时长、延迟，同时避免动画重叠的问题，以下是修改后的完整代码：

<div class="col-7 justify-content-center">
  <span id="role" class="animate__animated"></span>
</div>

<script>
jQuery(function ($) {
  var roles = ['role 1', 'role 2', 'role 3'];
  var counter = 0;
  var $role = $('#role');
  
  // 自定义动画配置（单位：秒）
  var animationSpeed = 1.2;   // 动画持续时长，值越小速度越快
  var animationDelay = 0.6;   // 动画延迟触发时间
  var switchInterval = 4;     // 文本切换的总间隔时间

  // 定义文本切换逻辑
  function switchRole() {
    // 先添加退出动画
    $role.addClass('animate__fadeOut');
    
    // 等待退出动画结束后，切换文本并执行进入动画
    setTimeout(function() {
      // 更新文本并重置计数器
      $role.text(roles[counter++]);
      if (counter >= roles.length) counter = 0;
      
      // 移除退出动画类，添加进入动画类
      $role.removeClass('animate__fadeOut').addClass('animate__fadeIn');
      
      // 进入动画结束后，移除类以便下一次复用
      setTimeout(function() {
        $role.removeClass('animate__fadeIn');
      }, animationSpeed * 1000);
    }, animationSpeed * 1000);
  }

  // 初始化显示第一个角色
  $role.text(roles[counter++]);
  // 启动定时切换
  setInterval(switchRole, (switchInterval * 1000));
});
</script>

关键说明： #

1. Animate.css类的使用：给#role添加基础类animate__animated，然后动态添加/移除animate__fadeIn（进入动画）和animate__fadeOut（退出动画），你也可以换成Animate.css里的其他动画，比如animate__slideInLeft、animate__bounceIn等。
2. 动画速度与延迟控制：通过animationSpeed和animationDelay变量自定义动画节奏，也可以用Animate.css的全局CSS变量统一设置：

   :root {
     --animate-duration: 1.2s;  /* 全局动画时长 */
     --animate-delay: 0.6s;     /* 全局动画延迟 */
   }
   

3. 避免动画冲突：用setTimeout等待动画结束后再执行下一步操作，替代delay()方法，因为delay()只对jQuery自带的动画队列有效，对CSS类切换不起作用。

额外小提示 #

如果想要更丰富的动画效果，直接去Animate.css的官方动画列表里选对应的类替换掉代码里的animate__fadeIn/animate__fadeOut就可以啦～

内容的提问来源于stack exchange，提问作者danielradst