How to resize and animate Twitter's Bootstrap

Question

I would like to ask if anybody can give me some ideas to dynamically resize a Bootrap 3 modal window, with animated effect smoothly. (original question for TB2 by Clannad System)

Answer 1

What should trigger the resize? Look here: https://stackoverflow.com/a/245011/1596547 You can use this to resize your modal.

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> 

Easings:

jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation.

jQuery UI provides several additional easing functions see: http://api.jqueryui.com/easings/

Or this plugin: http://gsgd.co.uk/sandbox/jquery/easing/ see also: http://easings.net/

Note: For Twitter's Bootstrap 2.x see: https://stackoverflow.com/a/18036895/1596547