Question

我有一个带标签的bootstrap轮播，每个标签都有一个进度条。单击选项卡时，进度条将开始动画，所有以前的条都会着色。这很好，但是第二轮的第一个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％。

旋转木马与进度栏 - jQuery宽度问题

1 个答案: