javascript - jQuery/Bootstrap 跟随带有悬停项的 div

Question

我有一个使用 bootstrap 的基本搜索结果页面，当我将鼠标悬停在某个元素上时，RHS div 应该跟随并滑动到该特定元素。请参阅以下页面以查看我要实现的目标。我如何使用 jQuery 实现这一点？

Example

JS Fiddle

<div class="fluid-container">
  <div class="row">
      <div class="col-md-7">
          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>

          <div class="search-result">
              Search result
          </div>
      </div>

      <div class="col-md-3">
          <div class="availability">
              Slide Down
          </div>
      </div>
  </div>
</div>

Answer 1

您可以为 marginTop 属性设置动画。注意:要使用 animate method你必须放弃 jquery.slim 并使用完整版本。全屏运行代码片段，否则启动 Bootstrap 的断点。

$('.search-result').on('mouseover', function() {
  // Cancel previous animation
  $('.availability').stop();
  // Get position of the triggered element
  let newTop = $(this).offset().top + 'px';
  // Animate availability box
  $('.availability').animate({
    marginTop: newTop
  }, 800);
})

.search-result {
  background-color: green;
  padding: 45px 20px;
  color: #fff;
  margin: 15px 0;
}

.availability {
  background-color: red;
  padding: 45px 20px;
  color: #fff;
  margin: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container">
  <div class="row">
    <div class="col-md-7">
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
      <div class="search-result">
        Search result
      </div>
    </div>

    <div class="col-md-3">
      <div class="availability">
        Slide Down
      </div>
    </div>
  </div>
</div>