jQuery mouseEnter， mouseleave on slideDown， SlideUp 导致问题

Question

jQuery code：

$(".menu-option").mouseover(function() {
$(this).css("opacity", 1);
$("h2", this).slideDown(500);
}); 
$(".menu-option").mouseout(function() {
$(this).css("opacity", 0.6);
$("h2", this).slideUp(500);
});

.HTML：

<div id="menu-gallery">
<a href="#"><div id="first-background" class="menu-option">
<h2>BREAKFAST</h2>
</div></a>
<a href="#"><div id="second-background" class="menu-option">
<h2>SEAFOOD</h2>
</div></a>
<a href="#"><div id="third-background" class="menu-option">
<h2>GRILLED</h2>
</div></a>
<a href="#"><div id="fourth-background" class="menu-option">
<h2>VEGAN</h2>
</div></a>
<a href="#"><div id="fifth-background" class="menu-option">
<h2>DRINKS</h2>
</div></a>
<a href="#"><div id="sixth-background" class="menu-option">
<h2>DESSERT</h2>
</div></a>
</div>
</div>

伙计们，这个jQuery函数发生了一些奇怪的事情。基本上，我希望 h2 在鼠标进入时向下滑动，然后在鼠标离开时滑出。它有点实现了这一点，但是当我将鼠标留在 h2 元素所在的位置时，即使没有鼠标离开，h2 元素也会开始向下和向上滑动，同时鼠标在一个点上(实际上，它似乎只发生在我突出显示 h2 元素放置的位置时，如前所述(。我认为在 h2 中添加了边距顶部，因此它出现在div/背景图像的中间。这一次，它又上下滑动，甚至没有停止！

我不确定是什么导致了这个问题。我的jQuery代码有问题吗？

这是我作为Web开发人员的第一个项目。所以我意识到我可能犯了一个简单的错误，但我无法发现它。

有人可以帮忙吗？

Answer 1

这与传播或气泡有关。当您的鼠标在 H2 上时，它实际上超出了菜单选项，因此被调用。

我建议代码应该使用 H2 来绑定触发器而不是菜单选项。喜欢这个：

$("h2").mouseover(function(){
$(this).closest('.menu-option').css("opacity", 1);
$(this).slideDown(500);
}); 
$("h2").mouseout(function(){
$(this).closest('.menu-option').css("opacity", 0.6);
$(this).slideUp(500);
});

Answer 2

只是交换事件。试试这个：

$('.menu-option').hover(
function() {
$(this).css("opacity", 0.6);

$(this).find('h2').slideUp(500);
},
function() {
$(this).css("opacity", 1);
$(this).find('h2').slideDown(500);
}
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-gallery">
<a href="#">
<div id="first-background" class="menu-option">
<h2>BREAKFAST</h2>
</div>
</a>
<a href="#">
<div id="second-background" class="menu-option">
<h2>SEAFOOD</h2>
</div>
</a>
<a href="#">
<div id="third-background" class="menu-option">
<h2>GRILLED</h2>
</div>
</a>
<a href="#">
<div id="fourth-background" class="menu-option">
<h2>VEGAN</h2>
</div>
</a>
<a href="#">
<div id="fifth-background" class="menu-option">
<h2>DRINKS</h2>
</div>
</a>
<a href="#">
<div id="sixth-background" class="menu-option">
<h2>DESSERT</h2>
</div>
</a>
</div>
</div>