使用jQuery处理fadeIn和fadeOut时遇到问题

我制作了一个JSFiddle（）来展示我的问题

我希望网格查看器具有显示：无；当页面加载时。然后，当你把鼠标悬停在任何一个链接上时，我希望它淡入淡出，并相应地重新定位

重新定位正在按预期工作，但我在淡入淡出时遇到问题。它消失后不会再消失。任何帮助都将不胜感激

处理悬停函数的JavaScript如下所示：

$("a.mainlink").hover(function() {
    var dataTitle = $(this).attr("data-title");
    $("#grid-viewer").stop().fadeIn();
    $("#grid-viewer").stop().animate({
        "left": ($(this).offset().left - $("#grid-view").position().left)
    }, 200);
    $("#grid-text").html(dataTitle);
}, function() {
    $("#grid-viewer").stop().fadeOut();
});

---

您必须删除第二个

.stop（）

，它在启动后立即阻止

fadeIn（）

。

您必须删除第二个

.stop（）

，它在启动后立即阻止

fadeIn（）

。

您可以使用：

$（“#网格查看器”）.stop（）.fadeIn（）使其可见

但是ime会立即用

$（“#网格查看器”）.stop（）停止fadeIn。设置动画（{

），因此不透明度保持为0，并且隐藏。 尝试将淡入淡出功能包含到动画中，如下所示：

$("#grid-viewer").stop().animate({
            "display" : "block",
            "opacity": 1,
            "left": ($(this).offset().left - $("#grid-view").position().left)
        }, 200);

全样本：

---

您可以使用：

$（“#网格查看器”）.stop（）.fadeIn（）

使其可见，但IME可以使用

$（“#网格查看器”）.stop（）.animate（{

使不透明度保持为0，并将其隐藏。 尝试将淡入淡出功能包含到动画中，如下所示：

$("#grid-viewer").stop().animate({
            "display" : "block",
            "opacity": 1,
            "left": ($(this).offset().left - $("#grid-view").position().left)
        }, 200);

全样本：

---

我假设它与.stop（）有关，但即使删除了.stop（），也无法使它工作在fadeIn和FadeOut之前，我在你的小提琴的“结果”选项卡中看不到任何内容…加载需要一段时间…@SamueleMattiuzzo oops。我在更改后忘记保存它。请稍等。编辑：现在试试@boz我知道，我在共享它之前忘记了更改/保存。现在应该可以工作了。我假设它与。stop（）有关，但即使我删除，也无法使其工作。停止（）在fadeIn和FadeOut之前，我在你的小提琴的“结果”选项卡中看不到任何内容…加载需要一段时间…@SamueleMattiuzzo oops。我在更改后忘记保存它。请稍等。编辑：现在试试@boz我知道，我在共享它之前忘记了更改/保存。现在应该可以工作了。经过更多的故障排除后，我发现不透明度确实在运行很奇怪。为什么呢？谢谢你的回答。因为不透明度设置为fadeIn和FadeOut以产生这种很好的破坏效果（从1，0.9…向下计数），当它达到0时，显示：没有被添加。所以如果你停止淡入动画，不透明度保持0。没有我的代码在工作，你不能为“显示”设置动画：“无”，你必须改用“如何”。在进行更多的故障排除后，我发现不透明度确实表现得非常奇怪。为什么？谢谢你的回答。因为不透明度设置为fadeIn和FadeOut，以产生这种良好的破坏效果（从1，0.9…向下计数）当它达到0时，显示：无添加。因此，如果停止淡入动画，opacity将保持0无我的代码正在工作，则无法为“显示”设置动画：“无”，您必须使用“如何”来代替。