Question

当我使用此功能时，使用事件鼠标悬停和鼠标输出创建移动div，所有时间都重复多次相同的效果：

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

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

我有2个div：

<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并在mouseout时隐藏

目前我尝试了许多事情但没有取得好成绩

谢谢，最好的问候

Answer 1

将示例与mouseenter和mouseleave一起使用，而不是mouseover和mouseout。

在mouseover文档中，您可以看到为什么会出现此问题：

此事件类型可能会因事件冒泡而导致许多令人头疼的问题。对于例如，当鼠标指针在此内部元素上移动时例如，鼠标悬停事件将被发送到该事件，然后涓涓细流外。 这可以在inopportune中触发我们绑定的鼠标悬停处理程序次即可。有关有用的替代，请参阅 .mouseenter（）的讨论。

除此之外，你将事件绑定到班级.c，这会在mouseover和mouseout
时触发div的事件
你应该尝试使用id选择器$('#container')，如下所示：

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

Answer 2

不是100％肯定你想要实现的目标，但这里是一个使用mouseenter和mouseleave的例子

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

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

你会看到一旦完成上滑，它会向下滑动，因为自从div消失后，它会触发mouseleave并再次向下滑动

使用slideUp进行jQuery鼠标悬停

2 个答案: