Why this jquery animate effect doesn't work as I wanted?

Question

I want a anchor's hover effect,When I mouse hover on the link,the hovered one could scroll from the top,then mouseout,the unhovered one could scroll from the bottom again.So here is my html code:

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

here is my jquery code:

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

Then the final result is here

but here is a problem ,when I mover mouse fast on the next link ,the previous one still scrolling,I want prevent this happened,I think about the stop function,so I added ".stop()" before ".animate",like this:

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

However the result doesn't work as I wanted,when I move fast on the link, they disappeared,look at here

Why this happened?How can I solve this problem and achieve my goal?Thank you very much!

Answer 1

Best solution i have found so far for this kind of problemms is: jQuery Hover Intent

See working example here: http://jsfiddle.net/x6aVc/2/

Answer 2

try using .stop(true,true) it may help

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

here is the updated fiddle