Question

我知道有很多类似这样的问题，我一直在寻找并尝试了几个小时但没有运气。

我尝试做的很容易，我的页面中有多个像这样的块当用户将鼠标悬停在.description元素

上时，系统会弹出.frame类

<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>

当用户在屏幕上滑动并且每个描述都被触发时，我认为这很烦人，所以我尝试添加一个＆＃34;延迟条件＆＃34;通过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/

Answer 2

您可以在处理程序输出功能中检查您的元素是否显示，然后应用切换功能。

从您的代码中

 var timer ,isToggle;
  $(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideToggle();}, 1500);        
            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                if(descrip_out.css('display') !== 'none')
                descrip_out.slideToggle(1000)
            }
        );    
    }
);

Answer 3

同样也可以与show和hide函数一起使用。即使在达到超时之前，也会调用slideToggle函数，但它无法正常工作。

您可以看到Demo

$(function() {
    var timeoutId;
    $(".frame").hover( showDesc, hideDesc );
});

function showDesc(){
 var descrip_in=$(".description",$(this))
 timer = setTimeout(function(){descrip_in.show(200);}, 1000);
}

function hideDesc(){
    var descrip_out=$(".description",$(this))
    clearTimeout(timer);
    descrip_out.hide(300)
}

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

3 个答案: