0

私のクライアントは、ポップアップがホバー時に表示されることを望んでいますが、すぐには表示されません。HoverIntent は理想的ですが、ポップアップ機能のカラーボックスで使用する方法がわかりません。

これまでの私のjQueryコードは次のとおりです。

$(document).ready(function(){   
$(".popup").colorbox({
    inline:true,
    scrolling:false
});
});

hoverintent を使用するにはどうすればよいですか? これには次のような構文があります。 $("#demo2 li").hoverIntent( makeTall, makeShort )

ありがとう - ジョー

4

1 に答える 1

0

例 1:

hoverIntent でカラーボックスを開くには、「open」プロパティを使用し、hoverIntent のオープン コールバック (「makeTall」関数) でカラーボックス オブジェクトを定義します。out コールバックは、カラーボックスが開く (そして強制的に mouseout になる) とすぐに起動するため、hoverIntent の out コールバック (「makeShort」関数) は必要ない場合があります。それでも hoverIntent には第 2 引数として関数が必要なので、空の関数を送信するだけです。

$(function() {

    $(".popup").hoverIntent(function() {
        $(this).colorbox({
            inline: true,
            scrolling:false,
            open:true
        })
    }, function(){});

});

ここで完全な例を参照してください。

例 2 - 宣言の分離:

または、すべてのカラーボックス宣言を別の場所に保持したい場合は、次のように hoverIntent() から宣言を分離できます。

$(function() {
    //colorbox definitions
    $(".popup").colorbox({
        inline: true,
        scrolling:false
    });

    //gallery code
    $(".popup").hoverIntent(function() {
        $(this).colorbox({ open:true })
    }, function(){});
});

例 3 - 「超過」遅延の変更:

デフォルトでは、hoverIntent は 100 ミリ秒の遅延を使用して「オーバー」コールバックを実行します。別の遅延を使用するには、2 つの関数の代わりにキーと値のオブジェクトを送信します。

$(function() {
    $(".popup").hoverIntent({
        over: function() {
            $(this).colorbox({
                inline: true,
                scrolling:false,
                open:true
            })
        },
        out: function(){},
        //the interval option defines the over-callback delay
        interval: 1000
    });
});

参考までに、あなたが言及したようにtimeoutオプションがありますが、それはアウトコールバックの遅延を定義します。ただし、カラーボックスで使用すると、カラーボックスが開かれるとすぐに「out」コールバックのタイマーが開始されます (マウスアウトを強制するポップアップのため)。たとえば、カラーボックス ウィンドウが開いてから 3 秒後に何かを行う必要がある場合は、覚えておく価値がありますが、それ以外の場合は、ウィンドウ全体のポップアップで使用すると役に立ちません。

于 2012-08-11T13:07:12.293 に答える