javascript - 如何在悬停按钮时通过文本切换图像，并延迟反向切换

Question

我有以下 html，其中有一个由图像表示的图 block ，下面有一个小的“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. 如果光标从“whatthis”图标移动到描述文本，那么我不希望发生切换效果。

我该怎么做？

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();   
            });

        });