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](http://jsfiddle.net/hh54188/x6aVc/1/)

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](http://jsfiddle.net/hh54188/CNWV6/)

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