Wie kann ich ein Panel ausblenden und verschieben?

Question

Ich habe eine App, die Bootstrap 3 und jQuery verwendet. Im Hauptbereich meiner Seite habe ich eine Schaltfläche mit der Aufschrift "open". Wenn ein Benutzer auf diese Schaltfläche klickt, möchte ich ein Panel von rechts einfliegen lassen und die gesamte Höhe des rechten Rands einnehmen.

Zu diesem Zeitpunkt habe ich eine Schaltfläche und ein Panel, wie in diesem bootply gezeigt. Ich bin mir jedoch nicht sicher, wie ich es zuerst verstecken und dann einschieben kann, wenn ein Benutzer auf die Schaltfläche klickt. Wie kann ich das machen? Mein HTML sieht so aus:

<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> 

Danke!

Answer 1

Wenn Sie nur das Ein-/Ausblenden des Panels mit der Schaltfläche animieren möchten, können Sie dies mit der jQuery animate-Methode tun.

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

Ich habe Ihr bootply Beispiel und hat eine kleine CSS und jQuery bei http://www.bootply.com/uB3YBxi9cC ein funktionierendes Beispiel zu zeigen.