带进度条的轮播 - jQuery 宽度问题

Question

我有一个选项卡式引导轮播，每个选项卡都有一个进度条。当我单击一个选项卡时，进度条开始动画，并且所有之前的条都被着色。效果很好，但是第二轮的第一个 LI 元素没有开始动画，它从一开始就是全彩色的，我不知道出了什么问题。

这是 bootply 中重现的问题：https://www.bootply.com/yB0NPOAzfj

非常感谢你的帮助，我觉得有点绝望了。

Answer 1

这是因为 CSS 宽度在同一个事件执行中被设置了两次：

$('#custom_carousel .controls li .progress').css( 'width', '' );

然后对于活动标签：

active.find('.progress').css("width", "100%");

由于更改已排队，因此当轮播环绕第一个选项卡时，进度保持其完整的 100% 宽度，因为它首先设置为 ''，然后设置为 100%，100% 是最后一次更改，因此是 CSS 值从事件函数中出来。

要重新绘制第一个选项卡的进度，您需要将宽度设置为 ''，然后将宽度设置为 100%，然后再安排：

$(document).ready(function(ev){
    $('#custom_carousel .controls li.active .progress').css("width", "100%");

    $('#custom_carousel').on('slide.bs.carousel', function (evt) {
      $('#custom_carousel .controls li.active').removeClass('active');
      $('#custom_carousel .controls li .progress').css( 'width', '' );
      setTimeout(function() {
          var active = $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')');
          active.find('.progress').css("width", "100%");
          active.addClass('active');
          active.prevAll().find('.progress').css("width", "100%");
      }, 0);
    })
});

setTimeout 将在事件函数退出后 0ms 调用，并在告知浏览器将其设置为 '' 后将选项卡的进度设置为 100%。