求助：实现jQuery无限平滑slideUp/slideDown轮播效果

问题根源 #

你的slideDown效果差是因为所有<h3>初始状态为默认显示（display:block），导致第一次slideDown没有动画，后续切换时元素也没有处于正确的隐藏状态，动画自然不流畅。同时原代码的循环逻辑可以更简洁。

1. 初始隐藏所有标题 #

先通过CSS设置所有<h3>初始隐藏，确保slideDown能触发平滑动画：

.services-slide-up h3 {
    display: none;
}

2. 优化后的jQuery代码 #

简化元素选择逻辑，修复动画触发条件，同时实现无缝循环：

$(document).ready(function() {
  // 一次性获取所有标题元素，无需逐个写选择器
  const $slideHeadings = $('.services-slide-up h3');
  let currentIndex = 0;

  function runAnimation() {
    // 对当前索引的标题执行slideDown
    $slideHeadings.eq(currentIndex).slideDown(1000, function() {
      // slideDown完成后执行slideUp
      $(this).slideUp(1000, function() {
        // 切换到下一个，到达最后一个时自动回到第一个（取模运算实现无缝循环）
        currentIndex = (currentIndex + 1) % $slideHeadings.length;
        // 递归调用继续动画
        runAnimation();
      });
    });
  }

  // 启动动画循环
  runAnimation();
});

关键改进点 #

• 动画一致性：初始隐藏所有标题，让slideDown和slideUp都基于相同的状态触发动画，保证平滑度一致
• 代码简洁性：用$('.services-slide-up h3')批量获取元素，避免手动维护选择器数组
• 无缝循环：通过(currentIndex + 1) % 元素总数的取模运算，替代原有的判断逻辑，实现从最后一个到第一个的自然循环
• 动画队列可控：每个动画都在回调中触发下一个，避免动画堆积导致的异常

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