1

そのため、 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/テストします。助けてくれてありがとう！

4

1 に答える 1

1

クリックを委任し、インテント プラグインを捨てる

イベントをデリゲートする場合は、本体で $.on を使用してセレクターを使用し、それらを .card 要素に固定します。

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

スクリプトの残りの部分については、もう少し堅牢なものが必要になると思います。

まず、画像が画面からどれだけ離れているかを確認します。画面の幅はさまざまであるため、a) 画像が 10px だけずれている場合、b) 画像が画面から 500px 以上ずれている場合は、画面 500px に戻してもカットされません。

次に、インテント プラグインを再考する必要があります。それは本当に必然ですか？自分で書く方が良いでしょう：

var tOut;

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

これはほんの始まりにすぎませんが、正しい方向への助けになるはずです

于 2012-10-17T22:47:07.320 に答える