jquery - 使用jQuery的fadeIn和fadeOut遇到麻烦

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

我希望＃grid-viewer可以显示：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();
});

最佳答案

您可以使用$("#grid-viewer").stop().fadeIn();使它可见：但是立即使用$("#grid-viewer").stop().animate({停止fadeIn，因此混浊度保持为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();
    });
});​

关于jquery - 使用jQuery的fadeIn和fadeOut遇到麻烦，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13991524/