javascript - Bootstrap 中的面板滚动

Question

我有如下 Bootstrap 代码

<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 的面板'movable-container' 必须与此面板水平对齐。

样本可见here

我想要实现的是当用户点击面板时

我尝试做的是获取我单击的容器的位置并将“可移动容器”x 像素向下移动，其中 x 是单击容器的返回位置。 jquery 的 animate() 函数也不能多次工作。

如何实现？

Answer 1

为什么不对两者使用相同的函数:

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

BootplyDemo