jquery - 使用 jQuery 处理淡入淡出和淡出问题

Question

我制作了一个 JSFiddle ( http://jsfiddle.net/wpC57/2 ) 来展示我的问题。

我希望#grid-viewer 有 display: none; 随着页面加载。然后，当您将鼠标悬停在任何链接上时，我希望它淡入并相应地重新定位。

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

处理悬停功能的 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();
});

Answer 1

您必须删除第二个.stop()，它在启动后立即阻塞fadeIn()。

Answer 2

你让它可见：$("#grid-viewer").stop().fadeIn();但是立即停止淡入淡出，$("#grid-viewer").stop().animate({因此不透明度保持为0并且它被隐藏了。尝试将淡入淡出功能包含在您的动画中，如下所示：

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

完整示例：http: //jsfiddle.net/wpC57/7/

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