Условно

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') функция (это всего лишь щелчок для целей тестирования), но я не знаю, как еще назначить мои переменные для того, что moused над (чтобы найти изображение).

В идеале я хотел бы сделать .live('hoverIntent'), но это не работает, или я просто не знаю, как это осуществить.

Что-то подсказывает мне, что я все испортил. http://magic.cardbinder.com/ для тестирования. Я ценю помощь!

Answer 1

Делегируйте щелчок и угробите плагин намерения

Если вы хотите делегировать событие, используйте $.on на теле с селекторами, чтобы прикрепить их к элементам.card.

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

Что касается остальной части вашего сценария, я думаю, вы можете захотеть что-то более надежное.

Сначала проверьте, как далеко от экрана изображение. Ширина экрана будет меняться, поэтому если отбросить его обратно на экран, 500px не обрежет его, если a) изображение будет только на 10px меньше, b) изображение больше, чем на 500px вне экрана.

Далее вам нужно будет переосмыслить плагин намерений; это действительно обязательно? лучше написать свой собственный:

var tOut;

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

Это только начало, но это должна быть полезная рука в правильном направлении.