Избегайте мерцания при наведении мыши

Question

Я пытаюсь реализовать небольшой эффект наведения мыши с помощью jquery, но я застрял в решении мерцающей проблемы.Я уже пытался вставить задержку для мышки, но все же у меня проблемы с изображениями.

Кто-нибудь знает, что это?URL тестирования: www.de-facto-magazin.de

$(".item").hover(

function() {
    $(this).parent().parent().find(".title").show();
    $(this).parent().parent().find(".bg").show();
    $(this).parent().parent().find(".bg").addClass("transparent");
    $(this).find(".bg").removeClass("transparent");
    $(this).find(".title").addClass("colored");
}, function() {
    $(this).parent().parent().find(".title").hide();
    $(this).parent().parent().find(".bg").hide();
    $(this).parent().parent().find(".title").removeClass("colored");

})​

Answer 1

Лучший способ избежать мерцания - это иметь отдельное событие наведения на вложенном div (id = "splash") для обработки show / hide и использовать текущее событие только для обработки, какой div активен. Что-то вроде этого (предупреждение, код не проверен):

$("#splash").hover(
    function(){
        $(this).find(".title").show();
        $(this).find(".bg").show();
    },function(){
        $(this).find(".title").hide();
        $(this).find(".bg").hide();
    }
);

$(".item").hover(
    function(){
        $(this).parent().parent().find(".bg").addClass("transparent");
        $(this).find(".bg").removeClass("transparent");
        $(this).find(".title").addClass("colored");
    }
);