0

アニメーション効果をスムーズに使用して、Bootrap 3 モーダル ウィンドウのサイズを動的に変更するアイデアを誰かに教えてもらえないかお願いしたいと思います。( Clannad Systemによる TB2 の元の質問)

4

1 に答える 1

2

サイズ変更のトリガーは何ですか？こちらをご覧ください: https://stackoverflow.com/a/245011/1596547これを使用してモーダルのサイズを変更できます。

html :

<div class="container">

  <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <a href="#" id="resize">Resize</a>
        </div>
        <div class="modal-footer">
          <a href="#" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</div>

JavaScript :

<script>
$('#resize').click(function(){
    $(".modal-dialog").animate({"width":"200px"},600,'linear');
}
);
</script>

イージング:

jQuery コアには 2 つのイージングが付属しています。アニメーション全体を通して一定のペースで進行するリニアと、アニメーションの途中よりもアニメーションの最初と最後でわずかにゆっくりと進行するスイング (jQuery コアの既定のイージング) です。

jQuery UI は、いくつかの追加のイージング関数を提供します。参照: http://api.jqueryui.com/easings/

または、このプラグイン: http://gsgd.co.uk/sandbox/jquery/easing/も参照: http://easings.net/

注: Twitter の Bootstrap 2.x については、https ://stackoverflow.com/a/18036895/1596547 を参照してください。

于 2013-08-04T11:56:26.727 に答える