fadeOut完成后fadeIn切换slide元素出现闪烁问题求最优解决方案

问题现象 #

点击切换按钮切换幻灯片时，除第一次操作外，目标幻灯片会出现闪烁。原代码在fadeOut动画完成后调用fadeIn显示对应div，调整过渡时长（如fast/slow）无法解决问题。

问题根源 #

1. 原代码选择所有.slides元素执行fadeOut(0)，每个元素的动画完成后都会触发一次回调，导致目标slide被多次调用fadeIn()，引发闪烁
2. 点击当前已显示的slide按钮时，会执行不必要的fadeOut/fadeIn操作，加剧闪烁

最简修复代码 #

修改后的JavaScript

$(document).on("click", ".action a", function (event) {
    const dataSlide = $(this).data("slide"); // 用data()获取data属性更高效
    const targetSlide = $(".data-slide-" + dataSlide);
    
    // 跳过当前已显示的slide，避免无效操作
    if (targetSlide.is(":visible")) return;
    
    // 仅对当前可见的slide执行fadeOut，确保回调仅触发一次
    $(".slider .slide .slides:visible").fadeOut(0, function () {
        targetSlide.fadeIn();
    });
});

原CSS保持不变

.slides {
    display: none;
}
.data-slide-1{
    display: block;
}
a{
  background:#ccc;
  padding:4px 6px;
}

原HTML保持不变

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="action">
    <a data-slide="1">1</a>
    <a data-slide="2">2</a>
    <a data-slide="3">3</a>
</div>
<div class="slider">
    <div class="slide">
        <div class="slides data-slide-1">
            <h1>Slide 1</h1>
        </div>
        <div class="slides data-slide-2">
            <h1>Slide 2</h1>
        </div>
        <div class="slides data-slide-3">
            <h1>Slide 3</h1>
        </div>
    </div>
</div>

关键优化点 #

• 用data()替代attr()获取data-slide属性，更适配jQuery对data-*属性的处理逻辑
• 增加可见性判断，跳过当前已显示的slide，避免无意义的动画操作
• 仅对当前可见的slide执行fadeOut，确保回调只触发一次，彻底避免重复fadeIn导致的闪烁

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