javascript - Jquery 隐藏/显示在悬停时反复发生

Question

所以我有两个 div，它们正好叠放在一起，并且具有相同的尺寸。默认情况下 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");
});

Answer 1

我每次都在使用:

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

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