進行状況バー付きのカルーセル - jQueryの幅の問題

Question

タブごとにプログレスバーを持つタブ付きのブートストラップカルーセルがあります。タブをクリックすると、プログレスバーがアニメーション化され、前のすべてのバーが色付けされます。それは正常に動作しますが、第2ラウンドの最初の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％は最後の変更であり、したがってeから出てくる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％に設定します。