如何調整和動畫Twitter的Bootstrap 3模式窗口？

Question

我想問問有沒有人可以給我一些想法，動態調整Bootrap 3模式窗口，動畫效果流暢。 （TB2的原始問題通過Clannad System）

Answer 1

什麼應該觸發調整大小？ 看這裏：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的芯一般具有兩個漸變效果：線性的，這在一個恆定的速度在整個前進動畫和搖擺（jQuery核心的默認緩動），它在動畫的開始和結束處比在動畫中間稍微慢一些。

jQuery用戶界面提供了一些額外的寬鬆政策功能看：http://api.jqueryui.com/easings/

或者這個插件：http://gsgd.co.uk/sandbox/jquery/easing/還看到：http://easings.net/

注：Twitter的引導2.x中看到：https://stackoverflow.com/a/18036895/1596547