Почему этот эффект анимации не работает так, как я хотел? - PullRequest
Новая
       18

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

0 голосов
/ 14 марта 2011

Мне нужен эффект наведения якоря. Когда я наводю указатель мыши на ссылку, наведенный может прокручиваться сверху, а затем наведением мыши, не наведенный может снова прокручиваться снизу. Вот мой 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');
        });

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

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

Ответы [ 2 ]

1 голос
/ 14 марта 2011

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

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

0 голосов
/ 14 марта 2011

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

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

...