Почему этот эффект анимации jquery не работает так, как я хотел?

Я хочу, чтобы эффект наведения якоря. Когда я наводил указатель мыши на ссылку, зависший мог прокручиваться сверху, затем вывод мыши, ненаведенный мог снова прокручиваться снизу. Итак, вот мой html-код:

<div class="viewport">
        <div class="container">
            <a class="scroll hovered" href="#">Hover Now</a>
            <a class="scroll nhover" href="#">Not Hover</a>
        </div>
    </div>

вот мой код jquery:

        $(".container").hover(function () {
            $(this).animate({
                top: '+=22'
            }, 800, 'easeInOutBack');
        }, function () {
            $(this).animate({
                top: '-=22'
            }, 800, 'easeInOutBack');
        });

Затем окончательный результат здесь

но вот проблема, когда я быстро перемещаю мышь по следующей ссылке, предыдущая все еще прокручивается, я хочу предотвратить это, я думаю о функции остановки, поэтому я добавил ".stop()" перед ".animate", так:

        $(".container").hover(function () {
            $(this).stop().animate({
                top: '+=22'
            }, 800, 'easeInOutBack');
        }, function () {
            $(this).stop().animate({
                top: '-=22'
            }, 800, 'easeInOutBack');
        });

Однако результат не работает, как я хотел, когда я быстро перемещаюсь по ссылке, они исчезают, посмотрите здесь< /а>

Почему это произошло? Как я могу решить эту проблему и достичь своей цели? Большое спасибо!


jquery hyperlink jquery-animate
person hh54188    schedule 14.03.2011    source источник
comment
Проблема в том, что если вы запустите зависание слишком рано, div не окажется на вершине +22, поэтому следующая анимация переместит его выше, чем раньше. Ответы 3nigma решают эту проблему (первый - это clearQueue, следующий - jumpToEnd, чтобы принудительно изменить CSS из родительской анимации)   -  person Thomas Menga    schedule 14.03.2011

Ответы (2)


arrow_upward
1
arrow_downward

попробуйте использовать .stop(true,true) может поможет

      $(".container").hover(function () {
            $(this).stop(true,true).animate({
                top: '+=22'
            }, 800, 'easeInOutBack');
        }, function () {
            $(this).stop(true,true).animate({
                top: '-=22'
            }, 800, 'easeInOutBack');
        });

вот обновленная скрипта

person Rafay    schedule 14.03.2011

arrow_upward
0
arrow_downward

Лучшее решение, которое я нашел до сих пор для такого рода проблем: jQuery Hover Intent

См. рабочий пример здесь: http://jsfiddle.net/x6aVc/2/

person amosrivera    schedule 14.03.2011