jQuery/Bootstrap 跟随 div 与悬停项目

Question

我有一个使用引导程序的基本搜索结果页面，当我将鼠标悬停在一个项目上时，RHSdiv 应该跟随并滑动到该特定项目。请参考以下页面，看看我想要实现的目标。如何使用jQuery实现这一点？

例

JS小提琴

<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方法，您必须删除jquery.slim并使用完整版本。 全屏运行代码段，否则引导程序的断点将启动。

$('.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>

Answer 2

$(document).ready(function(){
var positionY=0;
	$('.search-result').hover(function(){
var position=$(this).position();
	positionY=$(this).get(0).getBoundingClientRect().y;
/* transform: translateY(51px); */
$('.availability').css({transform:'translateY('+(positionY-15)+'px)'});
})
})

.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;
position: fixed;
top: 1px;
right: 10px;
/* display:none; */
}

<script
			  src="https://code.jquery.com/jquery-3.4.1.js"
			  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
			  crossorigin="anonymous"></script>
<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>