Jquery Hide/Show 在悬停时重复发生答案

【问题标题】：Jquery Hide/Show happening repeatedly on hoverJquery Hide/Show 在悬停时重复发生
【发布时间】：2016-01-17 13:01:47
【问题描述】：

所以我有两个divs，它们完全重叠放置并且具有相同的尺寸。默认情况下应该显示div A，但是当有人悬停在该区域上时，div A 已被Jquery 编程为.hide() 并且div B 已被编程为.show()。同样，当悬停结束时，显示应该恢复到默认值。我已经使用.mouseover() 和.mouseout() 函数完成了这项工作。

当我不使用 show() 和 hide() 函数传递任何参数时，它可以完美运行。但假设我做了类似.show(800) 和.hide(800) 或.show("slow") 和.hide("slow") 的操作，动画会反复发生一段时间然后停止。 Div B 显示，然后隐藏，同时Div A 隐藏和显示，重复。 .mouseover() / .mouseout() 函数应用于 A 和 B 的父 div。

我知道.stop() 函数，它在很大程度上解决了问题，但并不完全。我在Div B 上有超链接文本，当显示Div B 时，链接悬停动画会一直闪烁。

这是网站的链接。 http://nd2cindia.com/test_teams_display/（我现在正在使用.show() 和.hide() 函数，直到这个问题得到解决。）

这是我的 Jquery

$(".parent").mouseover(function () {
  $("> .A", this).hide("800");
  $("> .B", this).show("800");
});

$(".teambox").mouseout(function () {
  $("> .A", this).show("800");
  $("> .B", this).hide("800");
});

【问题讨论】：

你能替换成不工作的版本吗？所以我们可以看到问题..
你最好使用css动画而不是jQuery

标签： javascript jquery html css show-hide

【解决方案1】：

我每次都在使用：

$("selector").stop().show();
$("selector2").stop().hide();

它停止所有正在运行的动画并从实际状态运行。

【讨论】：

【解决方案2】：

这就是你想要的。我在内部编写了样式。你可以随意更改它。

<html>
<head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body>

<div class="a" style="width:100px;height:100px;background-color:green; position:absolute;top:10px;left:10px;">
</div>
<div class="b" style="width:100px;height:100px;background-color:orange;position:absolute;left:10px;top:10px">
</div>


<!-- js--> 
<script type="text/javascript">
 $(document).ready(function(){
    $(".b").mouseenter(function(){
        $(this).fadeOut(1000,function(){
            $(this).mouseleave(function(){
                $(this).fadeIn(1000);
            });
        });
    });

 });
</script>

</body>
</html>

希望这对您有所帮助。我建议你使用mouseenter 和mouseleave 而不是mouseover 和mouseout。

【讨论】：

【解决方案3】：

在您的 HTML 中，您有重复的 ID (#team_name_id)。这是无效的，因此我删除了 ID 并添加了一个类 - 您应该进行自己的更改，这将导致您更新 CSS。

首先，我创建了一个命名函数，您可以将其应用于您的事件而不是匿名函数 - 这样做通常更好，因为它可以让您分离您的关注点 - 并且更干燥。

其次，因为您正在切换，并且不需要其他逻辑 - 您可以使用单个函数。您将来可能希望将其分离出来，以便为您提供击球手控制和逻辑。

var hoverToggle = function () {
  // Toggling an element will bring it into view or hide it, and it will do so with a queue.
  // Anything more complex than this, you'll need to make your own queue
  $(this).find('.players_display, .beforehover').stop().toggle(800)
}

您会注意到我使用了“this”，它提供了上下文并阻止事件在您创建的框外冒泡。这也意味着它们更容易找到。

您还会注意到，我使用了一个逗号分隔的 选择器，它可以找到两个集合。使用 toggle 的另一个好处是它将独立处理每个元素。所以，一个 show()s 另一个 hide()s。

我发现 hover() 是一个更好的函数调用 - 因为它使代码更整洁。只需在其中调用您的函数。如果您愿意，也可以使用除 hover () 之外的其他函数。

$('.teambox').hover(hoverToggle, hoverToggle);

jsFiddle 演示：https://jsfiddle.net/likestothink/ndfbhw02/1/

【讨论】：