如何隱藏和滑動面板？

我有一個使用Bootstrap 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>

謝謝！

來源

2016-05-03 JQuery Mobile

http://jsbin.com/OjOTIGaP/1/edit?html,css,js,output – ProgrammerV5

@ ProgrammerV5 - 我不確定那個jsbin顯示的是什麼。 –

如果您只是想用按鈕動畫顯示/隱藏面板，可以使用jQuery animate方法執行此操作。

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

我把你的bootply例子，加入少許CSS和jQuery在http://www.bootply.com/uB3YBxi9cC顯示的工作示例。

來源

2016-05-03 12:45:57

動畫不是我的問題。這是面板的位置和高度。我試圖讓它從右側滑入並填充屏幕的右側邊緣。 –

如何隱藏和滑動面板？

回答

相關問題