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.

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

2 个答案: