jQuery幻灯片添加fadeInLeft动画后中间轮播项重复播放问题

• 永久绑定的CSS动画类与jQuery轮播逻辑存在直接冲突
  • 直接把fadeInLeft类硬写在中间项的HTML标签上，没有配套的动态挂载/卸载控制。这个类自带1s入场动画，配置了both填充模式，只要元素从display:none切换到可见状态，就会自动从头触发动画，完全不受轮播逻辑的时序控制。
  • CSS动画会接管元素的opacity属性控制权，和jQuery fadeIn/fadeOut依赖修改内联opacity实现显隐的逻辑抢占优先级，导致jQuery错误判断元素的可见状态，跳过正常的队列移位步骤，让带类的元素反复留在队首被展示。
• 初始加载阶段的动画提前干扰状态判断
  页面刚加载时，DOM解析到带fadeInLeft类的中间项，会在jQuery执行hide()隐藏操作之前就提前跑完一遍入场动画，把元素的初始opacity从0改成1，进一步放大了状态判断错误的问题。
• 原有链式调用存在时序隐患
  原来的轮播逻辑是同步执行链式操作：取队首元素→淡出→找下一个元素→淡入→把队首元素移到容器末尾。其中appendTo移位动作没有等fade动画完成就同步执行，本来就容易出现队列错位，只是没有CSS动画时元素状态统一，问题没有暴露。加入永久动画类后，元素视觉状态和DOM位置不匹配，最终导致中间项连续两次处在队首被展示。

• 先移除中间项HTML标签上硬写的fadeInLeft类，避免永久绑定带来的动画乱触发问题。
• 调整轮播切换逻辑，在每次轮到中间项显示时，动态给它加上fadeInLeft类，等入场动画执行完毕后立刻移除该类，彻底切断动画逻辑对jQuery状态判断的干扰。
• 把移位动作的执行时机和fade动画时长对齐，避免队列顺序错乱。

可直接替换的参考JS代码：

$(document).ready(function() {
    var timer;
    var $slideContainer = $(".slideshow2");
    // 初始隐藏除第一个外的所有幻灯片
    $slideContainer.children("div:not(:first)").hide();

    $slideContainer
        .mouseenter(function() {
            if (timer) clearInterval(timer);
        })
        .mouseleave(function() {
            var delay = parseInt($("#rrrr").value);
            timer = setInterval(switchSlide, delay);
        })
        .mouseleave();

    function switchSlide() {
        var $current = $slideContainer.children(":first");
        var $next = $current.next();
        // 执行当前元素淡出
        $current.fadeOut(500);
        // 给目标中间项动态加入场动画
        if ($next.hasClass("target-slide")) { // 提前给原中间项加个标识类
            $next.addClass("fadeInLeft").fadeIn(500).one("animationend", function() {
                $(this).removeClass("fadeInLeft");
            });
        } else {
            $next.fadeIn(500);
        }
        // 等淡出淡入完成后再移位，对齐动画时长
        setTimeout(function() {
            $current.appendTo($slideContainer);
        }, 500);
    }
});

对应的HTML小调整：给原来带fadeInLeft的中间项只加一个无冲突的标识类，去掉直接写的动画类：

<div class="target-slide"> <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>

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