In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.

The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)

Okay, now for the code. Here's the basic JQuery that I'm using:

$('.slider').hover(
    /* mouseover */
    function(){
        $(this).animate({
            top : '-=120'
        }, 300);
    },
    /* mouseout*/
    function(){
        $(this).animate({
            top : '+=120'
        }, 300);
    }
);

I've also recreated the behavior in a JSFiddle.

Any ideas on what's going on? :)

==EDIT== UPDATED JSFiddle