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

Question

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

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

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

处理悬停功能的 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

您可以使用以下命令使其可见: $("#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();
    });
});​