Funky mouseenter / mouseout с помощью Jquery.live - PullRequest
Новая
       14

Funky mouseenter / mouseout с помощью Jquery.live

0 голосов
/ 19 марта 2011

Это, кажется, очень распространенная проблема, хотя я попробовал рекомендации использовать addClass / removeClass вместо прямых манипуляций с CSS, и я пробовал mouseleave / mouseout, но оба вызывают проблемы.

ВсеЯ хочу, чтобы это был простой переход, который меняет класс!Все, что я пробую, либо непостоянно, либо включает, либо выключает класс.Единственное другое требование, которое я пытался выполнить, - это чтобы слушатель работал в функции, а не в строке.Это то, что делает это невозможным? 

function highlight(_event){
  $(this).addClass("Highlighted");
}
function unhighlight(_event){
  $(this).delay(2000,function(){
    $(this).removeClass("Highlighted");
  });
}

$(document).ready(function () { 
  $(".Content").live('mouseenter',highlight);
  $(".Content").live('mouseout',unhighlight);
});

JSFiddle из вышеперечисленного

Редактировать

Добавление .stop(true,true) кажетсячтобы помочь совсем немного.

Ответы [ 3 ]

1 голос
/ 19 марта 2011

Если вы хотите использовать live, вы можете сделать следующее, используя .toggleClass(), .mouseover() & .mouseout(): 

$(".content").live("mouseover mouseout", function() {
    $(this).toggleClass("highlight");
});

См. Демоверсию здесь

Обновление: Я не мог оставить этот, поэтому продолжил возиться с вашим примером - после комментария вы используете функции в других местах. Итак, вот что я нашел:

Вместо вызова .mouseout() используйте .mouseleave() - по некоторым причинам .mouseout() get вызывается несколько раз, когда мышь вращается - даже вызывается, когда мышь впервые входит в объект ..... Посмотрите демонстрацию в конце, чтобы понять, что я имею в виду здесь

Во-вторых, .delay() здесь не совсем правильно используется - он действительно предназначен для эффекта очереди - но на самом деле вам нужно добавить функцию с задержкой (хотя это эффект, который вам нужен) , поэтому вместо этого используйте .setTimeout(), чтобы позвонить вам.

Согласно документам:

Метод .delay() лучше всего подходит для задержка между очередями JQuery последствия. Потому что это ограничено - это например, не предлагает способ отменить задержку - .delay() не замена для родного JavaScript .setTimeout() функция, которая может быть больше подходит для определенных случаев использования.

Итак, готовые функции будут выглядеть так: 

function highlight(_event) {
    $(this).addClass("Highlighted");
}

function unhighlight(_event) {
    var obj = $(this);
    setTimeout(function() {
        obj.removeClass("Highlighted");
    }, 2000);
}

$(document).ready(function() {
    $(".Content").live('mouseenter', highlight);
    $(".Content").live('mouseleave', unhighlight);  
});

См. Демонстрационную версию здесь , которая покажет вам, что я имею в виду, что событие .mouseout() запускается несколько раз, где как .mouseleave() функция вызывается только один раз, когда мышь фактически уходит.
Примечание: используйте кнопку ввода, чтобы нажать предупреждение, не двигайте мышкой !!

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

0 голосов
/ 19 марта 2011

Попробуйте 

//Might be better to use .toggleClass("Highlighted");

var timer;

$(".Content").hover(
    function(){
        clearTimeout(timer);
        $(this).addClass("Highlighted");
    },
    function(){
        timer = setTimeout(function(){
            $(this).removeClass("Highlighted");
        }, 2000);
    }
);
0 голосов
/ 19 марта 2011

Если вы хотите, я думаю, что вы можете сбросить функции и сделать это вместо этого - если вы, конечно, не используете функции для чего-либо еще:

$ (документ) .ready (function () {
$ ( "Содержание"). Жить ( 'MouseEnter', функция () { $ (Это) .addClass ( "Выделено");
});
$ ( "Содержание"). Жить ( 'MouseOut', функция () { $ (Это) .delay (2000, функция () { $ (Это) .removeClass ( "Выделено"); });
}); });

...