hoverIntent条件

Question

因此，我尝试使用hoverIntent来控制一些图像上的延迟悬停。图像在瞬间悬停时会放大。不过，这是有条件的，我似乎无法理解它。如果它在屏幕的左侧，它将像正常一样放大，但如果它在屏幕的右侧，它也会移动到左侧。

$(".card").live('click', function () {
    windowWidth = $(window).width();
    var id = $(this).attr('id');
    var offset = $(this).offset();
    var pos = offset.left;

        if (windowWidth - pos < 500) {      
            var config = {
                over: alert(id+" right"),
                timeout: 500,
                out: alert('out'),
                sensitivity: 7,
                interval: 500
            }
        $(this).hoverIntent( config )           
        }

        else (pos < 500) {
            var config = {
                over: alert(id+" left"),
                timeout: 500, 
                out: alert('out'),
                sensitivity: 7,
                interval: 500
            }
            $(this).hoverIntent( config )
        }
})

现在，我真的希望在没有.live('click')函数的情况下工作(这只是为了测试目的而点击一下)，但是我不知道如何将我的变量赋给鼠标经过的东西(以定位图像)。

理想情况下，我想做一个.live('hoverIntent')，但这不起作用，或者我只是不确定如何完成它。

我有种感觉我把整件事搞砸了。要测试的http://magic.cardbinder.com/。非常感谢你的帮助！

Answer 1

委派点击并丢弃意图插件

如果您想委派事件，请在主体上使用带有选择器的$.on，以将它们固定到.card元素。

$("body").on("click", ".card", function(){
    //event script here
});

至于你的脚本的其余部分，我认为你可能需要更健壮的东西。

首先检查图像离屏幕有多远。屏幕宽度会有所不同，因此，如果a)图像只差10px，b)图像超出屏幕500px，则将其重新放回屏幕500px不会对其进行剪切。

接下来，您需要重新考虑intent插件；它真的有必要吗？编写自己的代码会更好：

var tOut;

$("body").on("mouseover", ".card", function(){
    clearTimeout(tOut);
    tOut = setTimeout(function(){
        //enlarge!
    }, 300);
});

这只是一个开始，但它应该是正确方向上的一只手。