如何在jQuery中并行运行两个slide滑动动画，实现幻灯片同步切换效果

你的代码是串行动画的原因是你把下一张幻灯片的显示逻辑写在了当前幻灯片隐藏动画的回调函数里，回调会等前一个动画执行完才触发，所以要实现并行动画，只需要去掉回调嵌套，同时触发两个动画，再配合少量CSS调整保证两张幻灯片在滑动时处于同一层级位置即可。

CSS 修改 #

首先给父容器和幻灯片加定位，避免两个幻灯片上下排列导致滑动效果异常：

.slide[data-slide-status="hidden"] {
  display: none;
}
main {
  position: relative;
  min-height: 100px; /* 可根据实际内容高度调整，避免父容器高度塌陷 */
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

JS 修改 #

去掉回调嵌套，同时触发隐藏和显示动画，统一动画时长保证动作同步：

$(document).ready(function() {
  $("button").on('click', function() {
    // 提前缓存DOM节点避免重复查询
    const $currentSlide = $('.slide[data-slide-status="shown"]');
    const $nextSlide = $("#three");
    
    // 同步触发两个动画，400为动画时长（单位毫秒）可自行调整
    $currentSlide.hide('slide', { direction: 'left' }, 400, function() {
      $currentSlide.attr("data-slide-status", "hidden");
    });
    $nextSlide.show('slide', { direction: 'right' }, 400, function() {
      $nextSlide.attr("data-slide-status", "shown");
    });
  });
})

修改说明 #

• 新增的CSS定位规则让两张幻灯片始终重叠在父容器的同一位置，滑动时才会出现左右并排切换的效果，不会上下错位
• 去掉了原代码中hide方法的回调嵌套，两个动画会同时触发，只要两个动画时长一致就能保证同步完成
• 提前缓存DOM节点可以减少重复DOM查询，优化执行效率

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