Fatal编程技术网
  • javascript/
  • Javascript Jquery在悬停时重复隐藏/显示

Javascript Jquery在悬停时重复隐藏/显示

javascript jquery html css

Javascript Jquery在悬停时重复隐藏/显示,javascript,jquery,html,css,show-hide,Javascript,Jquery,Html,Css,Show Hide,因此，我有两个divs，它们正好位于彼此的顶部，具有相同的尺寸。默认情况下，应显示div A，但当有人悬停在该区域上方时，Jquery将div A编程为.hide（），div B编程为.show（）。同样，当悬停结束时，显示器应返回默认状态。我使用.mouseover（）和.mouseout（）函数完成了这项工作 当我使用show（）和hide（）函数不传递任何参数时，它工作得非常好。但是假设我做了类似于.show（800）和.hide（800）或.show（“slow”）和.hide（“slo

因此，我有两个
div
s，它们正好位于彼此的顶部，具有相同的尺寸。默认情况下，应显示
div A
，但当有人悬停在该区域上方时，
Jquery
将
div A
编程为
.hide（）
，
div B
编程为
.show（）
。同样，当悬停结束时，显示器应返回默认状态。我使用
.mouseover（）
和
.mouseout（）
函数完成了这项工作

当我使用
show（）
和
hide（）
函数不传递任何参数时，它工作得非常好。但是假设我做了类似于
.show（800）
和
.hide（800）
或
.show（“slow”）
和
.hide（“slow”）
的动作，动画会重复出现一段时间，然后停止<代码>分区B显示，然后隐藏，同时
分区A
重复隐藏和显示。
.mouseover（）
/
.mouseout（）
函数应用于A和B的父级
div

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

这里是该网站的链接。（我现在正在使用
.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");
});
我每次都在使用：

$("selector").stop().show();
$("selector2").stop().hide();
它停止所有正在运行的动画，并从实际状态运行。

这是您想要的。我在内部编写了样式。您可以根据需要更改样式

<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>


$（文档）.ready（函数（）{
$（“.b”）.mouseenter（函数（）{
$（this）.fadeOut（1000，function（）{
$（this.mouseleave（function（））{
美元（本）.fadeIn（1000）；
});
});
});
});
希望这对你有帮助。我建议您使用
mouseenter
和
mouseleave
而不是
mouseover
和
mouseout
在HTML中，您有重复的id（\team\u name\u 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”，它提供了上下文，并停止了在您创建的框外冒泡的事件。这也意味着它们更容易找到

您还会注意到，我使用了一个逗号分隔的选择器来查找这两个集合。使用切换的另一个好处是它将独立地处理每个元素。所以，当一个show（）的时候，另一个hide（）的时候

我发现hover（）是一个更好的函数调用，因为它使代码更整洁。只需调用其中的函数。如果您愿意，也可以对除hover（）之外的其他函数执行同样的操作

$('.teambox').hover(hoverToggle, hoverToggle);
jsFiddle to demo:

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