JQuery Наведите курсор мыши

Question

$('.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/

Answer 1

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

Answer 2

Попробуйте использовать .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();
    });
});