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();看到它，但是imediatly用$("#grid-viewer").stop().animate({停止fadeIn，因此opatcity保持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遇到fadeIn和fadeOut问题

2 个答案: