使用 .animate 和 .mouseover 让元素出现/消失

Question

我正在学习JavaScript和jQuery，在做下面的练习时，我遇到了一个问题。 我在页面右侧有一个div，其中包含另一个较小的div，其中包含一个带有一些img的无序列表，我只想在鼠标指针进入第一个div时才出现。

问题是，当鼠标指针进入第一个div时，较小的指针开始不受控制地上下移动。

我已经尝试在更大的div 上使用 .is(：hover( 方法，正如关于 SO 的另一个问题所建议的那样，但它没有帮助。

这是我的代码：

stato = "out";
$("#control").mouseover(
function() {
if (stato == "out")
$("#socialBox").animate({
top: 300
});
//$("#socialBox").show();
stato = "in";
}
);
$("#control").mouseleave(
function() {
$("#socialBox").animate({
top: -500
});
//$("#socialBox").hide();
stato = "out";
}
);

body {
background: lightblue;
}
img {
height: 50px;
width: 50px;
}
ul {
list-style-type: none;
}
#control {
position: fixed;
right: 0px;
top: 0px;
height: 100%;
width: 100px;
background: yellow;
}
#socialBox {
position: fixed;
top: -500px;
right: 0px;
width: 75px;
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control"></div>
<div id="socialBox">
<ul>
<li><img id="cane" src="img/cane.jpg" /></li>
<li><img id="gatto" src="img/gatto.jpg" /></li>
<li><img id="koala" src="img/koala.jpg" /></li>
<li><img id="mucca" src="img/mucca.jpg" /></li>
<li><img id="panda" src="img/panda.jpg" /></li>
<li id="nascondi"> X </li>
</ul>
</div>

我也尝试使用其他鼠标事件，例如鼠标输入和鼠标退出，但我遇到了同样的问题。

提前谢谢。

Answer 1

触发行为是因为"#socialBox"进入视图，然后阻止鼠标指针和"#control"之间的"路径"，因此脚本触发了mouseleave事件。

首先，摆脱鼠标移动...使用鼠标输入，您可以删除 stato 变量。

接下来将"#control"div 包裹在"#socialbox"周围，如下所示：

<div id="control">
<div id="socialBox">
<ul>
<li><img id="cane" src="img/cane.jpg" /></li>
<li><img id="gatto" src="img/gatto.jpg" /></li>
<li><img id="koala" src="img/koala.jpg" /></li>
<li><img id="mucca" src="img/mucca.jpg" /></li>
<li><img id="panda" src="img/panda.jpg" /></li>
<li id="nascondi"> X </li>
</ul>
</div>
</div>

Answer 2

正如 Thieri 提到的，你需要将你的socialBox包裹在controldiv 中。

socialBox不绑定到父div。

---

stato = "out";
$("#control").mouseover(
function() {
if (stato == "out")
$("#socialBox").animate({
top: 0
});
//$("#socialBox").show();
stato = "in";
}
);
$("#control").mouseleave(
function() {
$("#socialBox").animate({
top: -500
});
//$("#socialBox").hide();
stato = "out";
}
);

body {
background: lightblue;
}
img {
height: 50px;
width: 50px;
}
ul {
list-style-type: none;
}
#control {
position: fixed;
right: 0px;
top: 0px;
height: 100%;
width: 100px;
background: yellow;
}
#socialBox {
position: fixed;
top: -500px;
right: 0px;
width: 75px;
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
<div id="socialBox">
<ul>
<li><img id="cane" src="img/cane.jpg" /></li>
<li><img id="gatto" src="img/gatto.jpg" /></li>
<li><img id="koala" src="img/koala.jpg" /></li>
<li><img id="mucca" src="img/mucca.jpg" /></li>
<li><img id="panda" src="img/panda.jpg" /></li>
<li id="nascondi"> X </li>
</ul>
</div>
</div>

Answer 3

问题是您的动画#socialBox没有嵌套到#control中。无论您使用哪种鼠标事件，只要动画框进入光标下方，光标就会"离开"#control，触发隐藏动画。

如果要保持标记不变，可以使用计时器延迟动画。在下面的解决方案中，计时器确保如果#control mouseleave和#socialBox mouseenter(反之亦然(几乎同时触发，则不会执行动画。

我还在动画之前调用了.stop()，以避免因移动鼠标过快而将多个动画排队。

var shown = false;
var timer;
function triggerAnimation(show) {
clearTimeout(timer);
timer = setTimeout(function() {
// If we're already on the same state, no need to animate
if (show === shown) return;
// Animate socialBox
$("#socialBox").stop().animate({ top: show ? 300 : -500 });
// Toggle state
shown = !shown;
}, 10);
}
$("#control, #socialBox")
.mouseenter(function() { triggerAnimation(true); })
.mouseleave(function() { triggerAnimation(false); });

body { background: lightblue; }
img { height: 50px; width: 50px; }
ul { list-style-type: none; }
#control { position: fixed; right: 0px; top: 0px; height: 100%; width: 100px; background: yellow; }
#socialBox { position: fixed;  top: -500px; right: 0px; width: 75px; background:red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control"></div>
<div id="socialBox">
<ul>
<li><img id="cane" src="img/cane.jpg"/></li>
<li><img id="gatto" src="img/gatto.jpg"/></li>
<li><img id="koala" src="img/koala.jpg"/></li>
<li><img id="mucca" src="img/mucca.jpg"/></li>
<li><img id="panda" src="img/panda.jpg"/></li>
<li id="nascondi"> X </li>
</ul>
</div>

Answer 4

TL;DR：将你的socuialBoxdiv 移动到contentdiv 中。

完整解释： 问题都是因为事件冒泡。

首先，您的 html 需要更改，因为controldivsocialBox在div 之外，即使在使用mouseenter和mouseleave时，事件也会反复触发。因此，socialBox被移动到controldiv 中，并用于mouseenter和mouseleave事件。

第二，事件冒泡。由于事件冒泡，问题仍然出现在第一步之后。

鼠标悬停- 当鼠标指针移动到元素中时触发。在子元素上移动时，将触发子元素的事件，并且触发导致父元素mouseover的事件气泡。

鼠标输出- 与mouseover相同，但在离开元素时触发。

mouseEnter- 仅当鼠标指针进入事件绑定到的元素时触发。事件不会冒泡。

mouseleave- 与mouseenter相同，但在离开事件绑定到的元素时触发。

要更清楚地了解，请参阅这些文档。 jQuery mouseover， jQuery mouseout.

@gilly3有一个很好的工作小提琴来演示他的答案中的事件

stato = "out";
$("#control").mouseenter(function() {
$("#socialBox").animate({
top: 100
});
stato = "in";
});
$("#control").mouseleave(function() {
$("#socialBox").animate({
top: -500
});
stato = "out";
});

body {
background: lightblue;
}
img {
height: 50px;
width: 50px;
}
ul {
list-style-type: none;
}
#control {
position: fixed;
right: 0px;
top: 0px;
height: 100%;
width: 100px;
background: yellow;
}
#socialBox {
position: fixed;
top: -500px;
right: 0px;
width: 75px;
background: red;
pointer:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
<div id="socialBox">
<ul>
<li><img id="cane" src="img/cane.jpg" /></li>
<li><img id="gatto" src="img/gatto.jpg" /></li>
<li><img id="koala" src="img/koala.jpg" /></li>
<li><img id="mucca" src="img/mucca.jpg" /></li>
<li><img id="panda" src="img/panda.jpg" /></li>
<li id="nascondi"> X </li>
</ul>
</div>
</div>