панель прокрутки в загрузчике

Question

Я имею код начальной загрузки следующим

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

То, что я хочу добиться, когда я нажимаю на панели с идентификатором «НФ» или «зр», то панель с идентификатором «подвижный контейнер» должен быть выровнен по горизонтали с этой панелью.

Образец можно увидеть here

То, что я хочу достичь, когда пользователь нажимает на панели с

То, что я пытался сделать, это получить позицию контейнера я щелкнул и перемещение «mocable-контейнер 'x пикселей вниз, где x - возвращаемая позиция щелчка контейнера. Также функция animate() jquery не работает несколько раз.

Как достичь этого?

Answer 1

Почему вы не использовать ту же функцию для обоих:

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

BootplyDemo

Answer 2

Это то, что вы ищете?

$("#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); 
});