0

これは私の最初の質問です。

このようなものを作成したい: http://www.google.com/think/products/lightbox-ads.html

マウスオーバー/ホバー/エンターでファンシーボックスライトボックスを開始したいのですが、カーソルがその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;
            });

ありがとうございました。

4

2 に答える 2

0

これを試して、fancybox (fb_timer、fb_showing) を追跡し、mouseout イベントをトラップするのに役立つ 2 つの変数を設定します。

更新:作業フィドル
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 プラグインを使用することだと思います;)

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 オプションが混在していることにも注意してください。これらは互いに互換性がありません (使用しているバージョンについて言及したことはありません) ... 上でコメントしました。

別の投稿用に作成したデモhttp://www.picssel.com/playground/jquery/mouseEnterLeave_30jul12.htmlを次に示します (ただし、mouseleave で fancybox も閉じますが、必要ない場合があります)。

于 2013-05-17T02:10:30.863 に答える