0

我的客户希望弹出窗口出现在悬停时，但不是立即出现。HoverIntent 似乎很理想，但我不知道如何将它与我的弹出功能 colorbox 一起使用。

到目前为止，这是我的 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 回调就会触发，因此您可能不需要 hoverIntent 的 out 回调（“makeShort”函数）。即使这样 hoverIntent 需要一个函数作为第二个参数，所以只需发送一个空函数。

$(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 使用 100ms 的延迟来运行“over”回调。发送一个键值对象而不是 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选项，但这将定义出回调延迟。然而，当与 colorbox 一起使用时，“out”回调的计时器将在 colorbox 打开后立即启动（由于弹出窗口强制鼠标移出）。如果您需要在打开颜色框窗口 3 秒后发生某些事情，那么请记住这一点，但在与完整窗口弹出窗口一起使用时则无用。

于 2012-08-11T13:07:12.293 回答