Jquery 悬停问题淡入/淡出 - 停止闪烁！

Question

我正在使用此脚本在将鼠标悬停在另一个脚本上时淡入图标。

我还想在顶部图像完成淡入后隐藏上一个图像。

我遇到的问题是，当您将鼠标悬停在其上时，它似乎在消失之前闪烁。我需要停止眨眼！

下面是我的 HTML 和 jQuery 代码。我试图使这段代码具有一定的通用性。

.link-container {
    position: relative;
    cursor: pointer;
    float: left;
}
.title-hover {
    background-position: 0 -106px;
    width: 320px;
    height: 33px;
    margin: -32px 0 0 56px;
    display: none;
    z-index: 2;

}
.title {
    background-position: 0 -63px;
    width: 320px;
    height: 33px;
    margin: -32px 0 0 56px;
}

<div class="link-container">
     <div class="main-tile hover-init title"></div>
     <div class="main-tile title-hover"></div>
</div>

$(function () {
     $(".link-container").hover(function () {
        $(".hover-init", this).next().stop(true, true).fadeIn(400);
        $(".hover-init", this).hide();
    }, function () {
        $(".hover-init", this).next().stop(true, true).fadeOut(400);
        $(".hover-init", this).show();
    });
});

Answer 1

您想在淡入结束后开始淡出，对吗？然后将其设为 fadeIn 函数的回调：

$(".hover-init", this).next().stop(true, true).fadeIn(400, function() {
  $(".hover-init", this).fadeOut();
});

编辑：

现在我看到了您想要实现的效果，我什至不知道为什么要淡出第一个 div。

http://jsfiddle.net/ARyjq/3/ 这样做

Answer 2

问题是，当标题弹出时，悬停从一个 div 切换到另一个 div。
因此，您需要嗅探您所处的 div 类型并改变响应。

按照您的要求执行的代码如下所示：

$(".link-container div.main-tile").hover (fancyRollover);

function fancyRollover (zEvent) {
    var jThis           = $(this);
    var bInInitDiv      = jThis.hasClass ('hover-init');
    if (bInInitDiv) {
        var initDiv     = jThis;
        var hoverDiv    = jThis.next ();
    }
    else {
        var initDiv     = jThis.prev ();
        var hoverDiv    = jThis;
    }

    if (zEvent.type == 'mouseenter') {
        if (bInInitDiv) {
            hoverDiv.stop (true, true).fadeIn (400, function () {
                initDiv.hide ();
            } );
        }
        else {
            //--- Do nothing.
        }
    }
    else { //-- zEvent.type == 'mouseleave'
        if (bInInitDiv) {
            //--- Do nothing.
        }
        else {
            hoverDiv.stop (true, true).fadeOut (400);
            initDiv.show ();   
        }
    }
}

在 jsFiddle 上查看它的实际应用。