Как переключать изображение по тексту, при наведении курсора на кнопку и задерживать обратное переключение

Question

У меня есть следующий html, где есть плитка, которая представлена ​​изображением, а под ней есть маленький значок "whatsthis".Я хочу показать какой-то текст вместо изображения, когда человек наводит курсор на значок, и скрыть его, когда человек зависает.

<div id="tileImage" class="tile1 tileDiv"></div>
<div id="tileText" class="tileDiv" style="display:none">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac eros vitae nulla tincidunt volutpat. Etiam tortor ante, consequat in laoreet id, bibendum eget libero. Suspendisse vel arcu purus, id laoreet massa. </span>
</div>

<div id="tileContent">
    <span>Something</span>
    <div id="whatsthis"></div>
</div>

Я написал следующий код JavaScript

$(document).ready(function(){
    $("#whatsthis").hover(function(){
        $(this).parent().parent().find("#tileImage").hide();
        $(this).parent().parent().find("#tileText").show();
    },function(){
        $(this).parent().parent().find("#tileText").delay(1000).hide();
        $(this).parent().parent().find("#tileImage").show();
    });
});

Работает нормально, но есть две вещи

1. Я не хочу, чтобы текст сразу исчезал при наведении курсора, так как добавить задержку
2. Если курсор перемещаетсяот значка «что это» до текста описания, я не хочу, чтобы эффект переключения происходил.

Как я могу это сделать?

Answer 1

Чтение из документации JQuery:

Задерживаются только последующие события в очереди; например, это не задержит формы без аргументов .show () или .hide (), которые не используют очередь эффектов .

Я создал небольшое решение ... не самый лучший, но посмотрите на это.

        $(document).ready(function(){

            var hideShow = function( el ){
                var titleImageEl;
                var titleTextEl;

                function init(){ ativateListener(); }

                function ativateListener(){
                    $(el).mouseenter(function(){
                        titleImageEl = $(this).parent().parent().find("#tileImage");
                        titleTextEl = $(this).parent().parent().find("#tileText");
                        titleImageEl.hide();
                        titleTextEl.show();
                    });
                    $(el).mouseleave({root: this}, delay);
                }

                function deactivateListener(){
                    $(el).unbind('mouseenter');
                    $(el).unbind('mouseleave');
                }

                function exit(){
                    titleImageEl.show();
                    titleTextEl.hide();
                    ativateListener();
                }

                function delay(){
                    deactivateListener();
                    setTimeout(exit, 1000);
                }

                return {
                    init: init
                }
            };

            $('body #whatsthis').each(function(i) {
                new hideShow($(this)).init();   
            });

        });

Answer 2

Использование onmouseover и onmouse out может работать лучше, но вот исправленный jQuery

$(document).ready(function(){
    $("#whatsthis").hover(function(){
        $("#tileImage").hide();
        $("#tileText").show();
    },function(){
        setTimeout( function() {
            $("#tileText").hide();
            $("#tileImage").show();
        }, 1000 );
    });
});