jQuery .fadeOut ();.fadeIn ();спам ошибка?

Question

Я не знаю, возможно ли это, но у меня есть 3 DIV, к которым применены fadeIn и Out. Вот так:

    $('.boxHolder1').hover(function() {
        $('img.top1').fadeOut(400);
    },function() {
        $('img.top1').fadeIn(400);
    });
    $('.boxHolder2').hover(function() {
        $('img.top2').fadeOut(400);
    },function() {
        $('img.top2').fadeIn(400);
    });
    $('.boxHolder3').hover(function() {
        $('img.top3').fadeOut(400);
    },function() {
        $('img.top3').fadeIn(400);
    });

Мой вопрос.

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

Answer 1

Вы должны использовать функцию stop в jQuery для прекращения любых ранее запущенных анимаций:

$('.boxHolder1').hover(
    function() { $('img.top1').stop().fadeOut(400); },
    function() { $('img.top1').stop().fadeIn(400); });
$('.boxHolder2').hover(
    function() { $('img.top2').stop().fadeOut(400); },
    function() { $('img.top2').stop().fadeIn(400); });
$('.boxHolder3').hover(
    function() { $('img.top3').stop().fadeOut(400); },
    function() { $('img.top3').stop().fadeIn(400); });

Answer 2

Вы можете остановить анимацию перед любым FADEIN / FADEOUT.

Пример.

$('img.top1').stop(true,true).fadeOut(400);

Она очистит очередь и немедленно завершит анимацию.Измените оба параметра функции stop () в соответствии с вашими потребностями.

Answer 3

Да, вызовы обработчика событий помещаются в очередь.Это, конечно, не ошибка.

В вашем обратном вызове вы можете использовать stop(), чтобы остановить любую текущую анимацию.Обязательно передайте true в качестве первого аргумента, чтобы также отменить поставленные в очередь, и true в качестве второго аргумента, чтобы остановить текущую анимацию немедленно , оставляя ее с целевыми свойствами.

$('.boxHolder3').hover(function() {
    $('img.top3').stop(true, true).fadeOut(400);
},
function() {
    $('img.top3').stop(true, true).fadeIn(400);
});

Вы не станете более «эффективными», хотя, возможно, сможете уменьшить дублирование кода с помощью хитрого использования переменных.