JQuery анимированные очереди

Question

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

Вот мои animate() вещи:

$(document).ready(function()
{
    // Navigation effects
    $("table#cat_752586 td").mouseover(function()
    {
        $(this).animate({
            marginTop: "0px",
            lineHeight: "60px"
        }, 350);
    });

    $("table#cat_752586 td").mouseout(function()
    {
        $(this).animate({
            marginTop: "20px",
            lineHeight: "36px"
        }, 350);
    });
});

Какой самый простой способ отказаться от этой функции из моей навигации?

---

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

Answer 1

Заменить:

$(this).animate(...)

на это:

$(this).stop().animate(...)

Это остановит любую запущенную анимацию перед началом новой, эффективно очистит очередь.

См. документация jQuery .

Answer 2

Вам нужно .stop() до .animate()

$(this).stop().animate({});

Есть 2 параметра, которые .stop() принимает, которые вы можете настроить в зависимости от того, хотите ли вы, чтобы анимация перескочила до конца и / или очистила очередь. Обычно достаточно .stop(true).

Редактировать: Существует комбинированная версия для наведения мышки и мыши, которая является более чистой.

$("table#cat_752586 td").mouseover(function() {
    $(this).stop(true).animate({
        marginTop: "0px",
        lineHeight: "60px"
    }, 350);
}).mouseout(function() {
    $(this).stop(true).animate({
        marginTop: "20px",
        lineHeight: "36px"
    }, 350);
});