Question

女士们，先生们。我有一个#quicklook div。

#quicklook{
    height: 500px;
    width: 400px;
    background: #fff;
    position: absolute;
    margin-top:5px;
    margin-left:15px;
    box-shadow: 0 0 5px #BEBEBE;
    color:#000;
    z-index:100;
    display:none;
}

JQUERY

$(document).on('mouseenter','.quicklook-link',function(){
    var quicklookLink = $(this);                
    quicklooktimerShow = setTimeout(function(){     
        createQuickLook(quicklookLink);

          //some ajax request to load content in '#quicklook'   
        },3000);

}).on('mouseleave','.quicklook-link',function(){

            clearTimeout(quicklooktimerShow);
            removeQuickLook();   

});





    function createQuickLook(div){
        removeQuickLook();
        $('<div>',{
            id:'quicklook'
        }).append($('<div>',{ id:"quicklook-triangle"})).appendTo(div);

            $('#quicklook').show();             


    }
    function removeQuickLook(){
        $('#quicklook').remove();
        $('#quicklook-triangle').remove();
    }

目前，当我将鼠标悬停在.quicklook-link以上 3s 时，会创建#quicklook

我想要发生两件事。

如果空间不足，我会.mouseenter .quicklook-link 在屏幕的视口下方，然后将#quicklook定位在屏幕上方 .quicklook-link否则让它留在下面。就像完成一样的谷歌+ 即可。
只要鼠标从.quicklook-link离开，就会出现另一个错误调用removeQuickLook()函数，#quicklook为。{1}} 隐。但我想要几秒钟说（3-4s）的时间延迟隐藏 #quicklook。

Answer 1

对于时间延迟问题，你试图实现这个吗？

http://api.jquery.com/delay/

相对于浏览器大小在上方或下方定位div

1 个答案: