jQuery 使用 slideUp 鼠标悬停

Question

当我使用此功能创建移动 div 上下移动事件 mouseover 和 mouseout 时，总是重复我多次相同的效果:

<script>
function groups_cover_fade_on(id)
{
jQuery("."+id).slideDown(1000);
}

function groups_cover_fade_out(id)
{
jQuery("."+id).slideUp(1000);
}
</script>

我有 2 divs :

<div id="container" class="c1" onmouseout="groups_cover_fade_on('c1');">

<div id="container_2" class="c1" onmouseover="groups_cover_fade_out('c1');"></div>

</div>

当我去并且事件 onmouseout 执行脚本所有时间重复相同的效果 2 o 3 次，并且在此停止之后，我只希望在我将鼠标悬停时显示 div 和幻灯片鼠标移出时隐藏

目前我尝试了很多东西，但没有得到好的结果

谢谢，最诚挚的问候

Answer 1

不能 100% 确定您要实现的目标，但这里是一个使用 mouseenter 和 mouseleave 的示例

http://jsfiddle.net/Lyy15nx6/1/

$("#container").mouseenter(function () {
    $(this).slideUp(1000);
}).mouseleave(function () {
    $(this).slideDown(1000);
});

你会看到向上滑动完成后，它会向下滑动这是因为div消失后，它触发了mouseleave并再次向下滑动

Answer 2

使用 mouseenter 和 mouseleave 的示例，而不是 mouseover 和 mouseout。

在 mouseover 文档中，您可以了解遇到此问题的原因：

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

此外，您将事件绑定到 class .c，这将在 mouseover 和 mouseout[ 时触发 div 的事件

您应该尝试使用 ID 选择器 $('#container')，像这样：

$('#container').mouseover(function(){
    $(this).slideUp(1000);
});

$('#container').mouseout(function(){
    $(this).slideDown(1000);
})

jQuery 使用 slideUp 鼠标悬停

jQuery mouseover with slideUp

jquery

slide