Funky mouseenter/mouseout с Jquery.live

Кажется, это очень распространенная проблема, хотя я попробовал рекомендации по использованию 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), кажется, немного помогает.


jquery css live mouseenter
person RSG    schedule 19.03.2011    source источник
comment
Что вы пытаетесь выделить? Текст, div?   -  person Walker    schedule 19.03.2011
comment
Я не наблюдаю никаких проблем с вашим примером, как вы его описываете (мерцание). В чем проблема?   -  person Jared Farrish    schedule 19.03.2011
comment
Извините, я не пометил ссылку JSFiddle. Стили применяются к div. Как в Chrome, так и в FF эффект применяется непоследовательно при входе/удержании мыши, но всегда в конечном итоге застревает в выделенном состоянии.   -  person RSG    schedule 20.03.2011
comment
см. обновление к ответу, который я опубликовал, я прочитал комментарий, в котором вы используете функции в других местах, поэтому добавил к моему ответу, чтобы посмотреть, поможет ли он немного больше.   -  person Scoobler    schedule 20.03.2011

Ответы (3)


arrow_upward
1
arrow_downward

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

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

См. демонстрацию здесь

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

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

Во-вторых, .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() вызывается только один раз, когда мышь действительно уходит.
Примечание: используйте кнопку ввода, чтобы нажать на предупреждение ok , не двигайте мышь!!

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

person Scoobler    schedule 19.03.2011
comment
Обновлено, чтобы попытаться ответить ближе к комментариям под исходным вопросом. - person Scoobler; 20.03.2011

arrow_upward
0
arrow_downward

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

$(document).ready(function () {
$(".Content").live('mouseenter',function(){ $(this).addClass("Highlighted");
});
$(".Content").live('mouseout',function(){ $(this).delay(2000,function(){ $(this).removeClass("Highlighted"); });< бр> }); });

person Dennis Lauritzen    schedule 19.03.2011
comment
Мы используем функции в других местах. Я не хочу повторять код, но я близок к тому, чтобы сдаться и сделать это. - person RSG; 20.03.2011

arrow_upward
0
arrow_downward

Пытаться

//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);
    }
);
person mattsven    schedule 19.03.2011