面板滾動在引導

我有引導代碼如下面板滾動在引導

<div class="container"> 
    <div class="row "> 
    <div class="col-md-3"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Title</div> 
      <div class="panel-body"> 
       <div class="panel panel-default" id="fp"> 
        <div class="panel-body"> 
         First Panel 
        </div> 
       </div> 
       <div class="panel panel-default" id="sp"> 
        <div class="panel-body"> 
         Second Panel 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
<div class="col-md-3" id="movable-container"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Title</div> 
     <div class="panel-body"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
         Movable Panel 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我想達到的目標是，當我在面板上點擊ID爲「SF」或「SP」然後用ID面板'可移動容器'必須與此面板水平對齊。

樣品可以看出here

我想實現的是，當面板上的用戶點擊，

我試圖做的就是讓我點擊了集裝箱的位置和移動的「mocable容器'x像素向下，其中x是點擊容器的返回位置。另外jQuery的animate（）函數不能多次工作。

如何實現這一目標？

來源

2015-01-02 Arun Rahul

你爲什麼不使用相同的函數兩個：

$("#sp, #fp").on("click",function(e){ 
    var pos = $("#movable-container").position().top; 
    $('#movable-container').animate({ 
    'top': $(this).position().top 
    }, 1000); 
});

BootplyDemo

來源

2015-01-02 15:58:02 DaniP

我的位置的理解（）過的新手。你能告訴我它爲什麼起作用嗎？另外，如果我多次點擊它們，爲什麼動畫不能多次應用？ –

這是你在找什麼？

$("#sp").on("click",function(e){ 
    var pos = $("#movable-container").position().top; 
     $('#movable-container').animate({ 
      'top': $(this).position().top 
     }, 1000); 
}); 

$("#fp").on("click",function(e){ 
     $('#movable-container').animate({ 
      'top': $(this).position().top 
     }, 1000); 
});

來源

2015-01-02 15:55:54

面板滾動在引導

回答

相關問題