パネルを隠してスライドさせるにはどうすればいいですか？

Question

私は、ブートストラップ3とjQueryを使用するアプリを持っています。私のページのメインエリアには、「開く」というボタンがあります。ユーザーがそのボタンをクリックすると、右からパネルが飛び出し、右のマージンの高さ全体を占有したいと考えています。

この時点では、このbootplyに示すように、ボタンとパネルがあります。しかし、私はどのように最初にそれを非表示にして、ユーザーがボタンをクリックしたときにスライドするのか分かりません。どうやってやるの？私のHTMLはこのようになります：

<br> 
<div class="container"> 
    <button class="btn btn-default">open 
</button></div> 

<div class="panel panel-default" style="width:300px;"> 
    <div class="panel-heading"> 
    <h3 class="panel-title">Panel title</h3> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position:relative; top:-16px;"><span aria-hidden="true">×</span></button>  
    </div> 
    <div class="panel-body"> 
    <form> 
     <div class="form-group"> 
     <label for="exampleInput1">First Name</label> 
     <input class="form-control" id="exampleInput1"> 
     </div>  

     <div class="form-group"> 
     <label for="exampleInput2">Last Name</label> 
     <input class="form-control" id="exampleInput2"> 
     </div> 

     <ul class="list-inline"> 
     <li><button class="btn btn-primary">save</button></li> 
     <li><button class="btn btn-default">cancel</button></li>   
     </ul> 
    </form> 
    </div> 
</div> 

ありがとう！

Answer 1

ボタンでパネルの表示/非表示をアニメーション化したい場合は、jQueryアニメーションメソッドを使用してこれを行うことができます。

$('#pnl').animate({left: '10px',opacity:'1' }); 

私はあなたのbootply例を取って、http://www.bootply.com/uB3YBxi9cCで働く例を示すために、少しCSSとjQueryを追加しました。