javascript - 将鼠标悬停在多个 div 之一上并延迟，然后下拉子 div

Question

我知道有很多类似的问题，我已经搜索并尝试了几个小时，但没有成功。

我想做的很简单，我的页面中有多个像这样的 block 当用户将鼠标悬停在 .frame 元素上时，将弹出 .description 类

<div class="row">
    <div class="col-xs-4">
        <div class="frame">
            <div class="description">
                <h3>Title</h3>
                <p>Description</p>
            </div>
        </div>        
    </div>
    <div class="col-xs-4">
        <div class="frame">
            <div class="description">
                <h3>T2</h3>
                <p>Description</p>
            </div>
        </div>        
    </div>
</div>

我认为当用户在屏幕上滑动并触发每个描述时，这很烦人，因此我尝试通过 setTimeout() 添加“延迟条件”，因此，仅当用户停止在一个描述上时阻止至少1秒，弹出描述

但进展并不顺利，这是我的 Demo

这是我能做的最好的事情，延迟功能有效，但它似乎有两个触发器。

jQuery 代码:

var timer;

$(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideToggle();}, 1000);

            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                descrip_out.slideToggle(1000)
            }
        );    
    }
);

Answer 1

啊，这很微妙。

通过使用slideToggle而不是slideDown和slideUp，如果您在超时之前离开该元素，则可以在退出时切换弹出窗口!

var timer;

$(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideDown();}, 1000);

            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                descrip_out.slideUp(1000)
            }
        );    
    }
);

http://jsfiddle.net/1esrLrfs/71/