Блог

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

    });
  

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

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

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

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

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

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