3

Internet Explorer 9、10 で Twitter Bootstrap 3 の進行状況バーをアニメーション化して進行状況を表示するにはどうすればよいですか。

Mozilla または Chrome で表示すると、進行状況インジケーターが移動し、アニメーションが削除されますが、IE では表示されません。

プログレスバーのdivは次のとおりです。

<div class="progress progress-striped active" style="width:100px">
    <div id="myprogress"
         class="progress-bar progress-bar-success"
         role="progressbar"
         aria-valuenow="40"
         aria-valuemin="0"
         aria-valuemax="100"
         style="width: 0%">  
    </div>
</div>

進行状況を表示するために、デフォルトの jQuery ファイル アップロード UI を使用しています。

<script type="text/javascript"
        src="/Content/bootstrap/js/jquery.fileupload.js"></script>

<script type="text/javascript"
        src="/Content/bootstrap/js/jquery.fileupload-ui.js"></script>
4

3 に答える 3

3

browser の場合は jQuery animate メソッドを使用しIE lte 9ます。

例：

jQuery('#myprogress').animate({width:'1%'});

同様に、幅のパーセンテージを増やして増分を表示します。

アニメーション ストリップの場合は、IE 固有の css ファイルのセレクターの下に追加します。

ie.css存在しない場合、または適切なものがない場合は、新しい CSS ファイルを作成します。

このセレクターを追加します。

.progress-striped .progress-bar {
  background-image: url("an-animated-stripped-image.gif");
  background-repeat: repeat-x;
}
于 2013-10-23T08:10:26.003 に答える
0

Minddust による Github リポジトリへのリンクは次のとおりです https://github.com/minddust/bootstrap-progressbar

基本的な twitter-bootstrap プログレスバーを拡張するブートストラップ jquery プラグイン。Javascript を既存の css トランジションと組み合わせて追加することにより、プログレスバーをアニメーション化する機能を提供します。さらに、現在の進捗情報をバーに表示したり、コールバックを介して値を取得したりできます。

ご都合に合わせて、あらゆるイベントでご利用いただけます。

于 2014-03-25T07:08:53.823 に答える