jquery при наведении указателя мыши

$('.rollover').mouseover(function(e){

        e.stopPropagation();

        thisName = $(this).attr('title');

        $('li#'+thisName).show(50, 'swing');

    });


    $('.rollover').mouseout(function(e){

        e.stopPropagation();                    

        thisName = $(this).attr('title');

        $('li#'+thisName).hide(50, 'swing');

    });

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

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

Как бы я это сделал?

JS FIDDLE @ http://jsfiddle.net/callumander/XhpuT/


jquery mouseover mouseout
person callum.bennett    schedule 01.06.2011    source источник
comment
поставить целый пример на jsFiddle   -  person jakubmal    schedule 01.06.2011

Ответы (2)


arrow_upward
1
arrow_downward

Вместо того, чтобы замедлять работу, завершая каждую анимацию до того, как пользователь сможет просмотреть новый фрагмент контента, почему бы не использовать что-то вроде Плагин Hover Intent для предотвращения "случайного" наведения?

person Town    schedule 01.06.2011

arrow_upward
0
arrow_downward

Попробуйте использовать .queue (не проверено):

$('.rollover').mouseover(function(e){
    e.stopPropagation();
    thisName = $(this).attr('title');

    // start the showing once any currently running
    // animations are done
    $('li#'+thisName).queue(function() {
        $(this).show(50, 'swing');
        $(this).dequeue();
    });
}).mouseout(function(e){
    e.stopPropagation();                    
    thisName = $(this).attr('title');

    // start the hiding once any currently running
    // animations are done 
    $('li#'+thisName).queue(function() {
        $(this).hide(50, 'swing');
        $(this).dequeue();
    });
});
person karim79    schedule 01.06.2011