jQuery轮播组件：第2个滑块后进度条停止动画问题

问题根源 #

你的滑块进度条在第二个滑块后停止动画，核心原因是未彻底终止上一轮的进度条动画队列，直接重置样式的方式无法清除残留的动画状态，导致新的动画无法正常触发。

修复代码 #

替换原JavaScript代码为以下版本：

jQuery(document).ready(function() {
    // Quotes rotator
    var divs = jQuery(".cbp-qtcontent");

    function fade() {
        var current = jQuery(".current");
        var currentIndex = divs.index(current),
            nextIndex = currentIndex + 1;

        if (nextIndex >= divs.length) {
            nextIndex = 0;
        }

        var next = divs.eq(nextIndex);

        next.stop().fadeIn(1500, function() {
            jQuery(this).addClass("current");
        });

        current.stop().fadeOut(1500, function() {
            jQuery(this).removeClass("current");
            _startProgress();
            setTimeout(fade, 8000);
        });
    }

    function _startProgress() {
        // 彻底终止之前的动画并清除队列，重置宽度到初始状态
        jQuery(".cbp-qtprogress").stop(true, true).css("width", "0%");
        // 启动新的进度条动画
        jQuery(".cbp-qtprogress").animate({
            width: "98%"
        }, 8000);
    }

    _startProgress();
    setTimeout(fade, 8000);
});

关键修改点 #

1. 动画队列清理：使用.stop(true, true)终止所有未完成的进度条动画，清除队列并直接跳转到动画结束状态，确保进度条处于可重置的干净状态。
2. 精准状态重置：用.css("width", "0%")替代removeAttr("style")，既重置进度条宽度，又保留其他基础样式（比如背景色、高度），避免不必要的样式丢失。
3. 动画触发时机：保持进度条动画与滑块切换的时间线完全同步，确保每一次滑块切换后，进度条都能重新从0开始动画。

验证效果 #

修改后，进度条会在三个滑块切换时持续循环动画：

• 滑块1显示时，进度条从0到98%（8秒），然后切换到滑块2
• 滑块2显示时，进度条重置后再次动画，完成后切换到滑块3
• 滑块3完成后回到滑块1，循环往复

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