Jquery исчезает / исчезает при проблеме с зависанием - прекратите мигать!

Я использую этот сценарий, чтобы скрыть значки поверх другого, когда завис над ним.

Я также хочу скрыть предыдущее изображение, как только верхнее изображение исчезнет.

Проблема, с которой я сталкиваюсь, заключается в том, что при наведении курсора он, кажется, мигает, прежде чем исчезает. Мне нужно, чтобы мигание прекратилось!

Ниже мой код 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();
    });
});
Источник

2 ответа

Решение

Проблема в том, что при всплывающем заголовке указатель мыши переключается с одного элемента на другой.
Итак, вам нужно выяснить, в каком диве вы находитесь, и варьировать ответ.

Код, который делает, как вы просите, выглядит следующим образом:

$(".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.

Источник

Вы хотите начать постепенное исчезновение ПОСЛЕ окончания постепенного исчезновения, верно? Затем сделайте обратный вызов функции fadeIn:

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

РЕДАКТИРОВАТЬ:

теперь, когда я вижу эффект, которого ты хочешь достичь, я даже не знаю, почему ты хочешь исчезнуть из первого div.

http://jsfiddle.net/ARyjq/3/ сделать это

Источник
Другие вопросы по тегам