0

这是我的第一个问题。

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

在鼠标悬停/输入时，我想启动fancybox灯箱，但前提是光标在该div中例如2秒，但如果用户在此之前移出，它应该防止触发。

我已经编写了这段代码，但不知道如何添加一些清除超时或阻止执行 if 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;
            });

谢谢你。

4

2 回答 2

0

试一试，设置 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;
       });
于 2013-05-16T21:42:56.220 回答
0

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

然后创建一个打开fancybox的函数，click在您的选择器上触发a（$('.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 选项（您从未提及您使用的版本）......我在上面评论了它们。

这是我为另一篇文章创建的演示http://www.picssel.com/playground/jquery/mouseEnterLeave_30jul12.html

于 2013-05-17T02:10:30.863 回答