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 完成后开始fadeOut，对吗？然后让它成为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 ();   
        }
    }
}

See it in action at jsFiddle.