Question

这是我的第一个问题。

我想创建这样的东西： http://www.google.com/think/products/lightbox-ads.html

鼠标悬停/悬停/输入我想启动fancybox灯箱，但仅当光标位于该div中时为2秒，但如果用户在此之前移出，则应该阻止触发。

我已编写此代码，但不知道如何添加一些清除超时或阻止执行mouseleave：

$('.somediv').fancybox({
                'width': 580,
                'height': 326,
                'autoScale': false,
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'type': 'iframe',
                'fitToView' : false,
                'autoSize' : false,
                'padding':0, 
                'margin':0
            }).mouseover(function (e) {
                $('.gif-loader').show(); // this just showing loading gif...
                e.stopPropagation();
                e.preventDefault();
                setTimeout(function() { 
                            $('video.topvideo')[0].pause(); // pausing video on mouseover...
                            $('.somediv').click();
                            $('.gif-loader').hide(); // hides loading gif
                }, 2000).stop(); // 2 seconds
                e.cancelBubble = true;
                return false;
            });

谢谢。

Answer 1

尝试一下，设置2个变量来帮助跟踪fancybox（fb_timer，fb_showing）并捕获mouseout事件：

更新：工作小提琴 http://jsfiddle.net/GpfpK/4/

var fb_timer = null;
var fb_showing = false;
$('#gif-loader').hide()
$('#somediv').fancybox({
            'width': 580,
            'height': 326,
            'autoScale': false,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'type': 'iframe',
            'fitToView' : false,
            'autoSize' : false,
            'padding':0, 
            'margin':0
        }).hover(function (e) {

            $('#gif-loader').show(); // this just showing loading gif...

            e.stopPropagation();
            e.preventDefault();

            // setup timer 
            fb_timer = setTimeout(function() { 
                        // set fancybox showing
                        fb_showing = true;
                        //\\$('video.topvideo')[0].pause(); // pausing video on mouseover...
                        //\\$('#somediv').trigger("click");
                        $('#gif-loader').hide(); // hides loading gif
            }, 2000); // 2 seconds

            // setup mouse out handler
            // you may need to change "#somediv" to ".fancybox-overlay"
            //$(".fancybox-overlay").mouseout(function() {
            $("#somediv").mouseout(function() {
                console.log("mouseout - hiding loader");
                $('#gif-loader').hide();
                if (fb_showing){
                    // close fancybox
                    $.fancybox.close();
                }else{
                    // stop the timer
                    clearTimeout( fb_timer );
                }
            });    

            e.cancelBubble = true;
            return false;
       });

Answer 2

我认为您最好的选择是使用 hoverIntent jQuery插件，而不是重新发明轮子;）

然后创建一个功能，打开fancybox，在你的选择器上触发click $('.somediv')，就像你的例子一样）

function openFancybox(){
    $(this).trigger("click");
}

然后你的fancybox和hoverIntent初始化：

$('.somediv').fancybox({
    'width': 580,
    'height': 326,
    'autoScale': false, // for v1.3.4
    'transitionIn': 'elastic', // for v1.3.4
    'transitionOut': 'elastic', // for v1.3.4
    'type': 'iframe',
    'fitToView': false, // for v2.1.x
    'autoSize': false, // for v2.1.x
    'padding': 0,
    'margin': 0
}).hoverIntent({
    sensitivity: 7,
    interval:500,
    timeout:0,
    over: openFancybox
 });

（查看hoverIntent的文档以微调您的设置）

另外通知您正在混合fancybox v1.3.4和v2.1.x的API选项彼此不兼容（您从未提及您使用的是哪个版本）...我上面评论了他们。

这是我为另一篇文章创建的DEMO http://www.picssel.com/playground/jquery/mouseEnterLeave_30jul12.html（虽然它也关闭了mouseleave上的fancybox，但你可能不需要它）

jQuery，Fancybox - 在mouseleave上防止鼠标悬停功能

2 个答案: