暂停jQuery动画

Question

I'm writing this plugin for a site and this one thing is really bugging me. What it is: http://pixelmatrixdesign.com/work/detail/silicon_florist/

What you see on the right, except it's activated by mouseenter and reset on mouseout:

$this.css({position:'relative'}).wrap('<div class="img_mask"></div>')
.parent().bind('mouseenter',function(){
    $img = $(this).find('img')
    _movement_amt = $img.height()-$(this).height();
    if($img.css('top')!=='auto' && $img.css('top') !== '0px'){
        _movement_amt = _movement_amt+parseInt($img.css('top').split('px')[0]);
    }
    $(this).find('img').animate({top:'-='+_movement_amt+'px'},3000,'linear')
}).bind('mouseleave',function(){
    $(this).find('img').animate({top:'0'},1000);
});

That's the code sample. The issue is, when you hover on top, let it scroll 500 of 1000px, and then hover again it's a slower animation which is correct... because now it's only got to go 500 more pixels in the same time (3 seconds) as it did with a 1000px. I tried using .stop() but im not sure how to restart the animation on hover again?

Answer 1

Take a look at this example found on the jQuery website. It shows how to pause an animation onmouseout and resume again onmouseover. (I listed the code below just so its all in one location for people who look for it in the future. I did not write this code.)

/* SCRIPT */

<script type="text/javascript">
$(document).ready(function() {
    $('div.slideshow').cycle({
        fx: 'fade',
        speed:    300, 
        timeout:  800
    });

    $("div.slideshow").cycle('pause'); //we pause the animation by default

    $("div.slideshow").mouseover(function(){
      $(this).cycle('resume');
    }).mouseout(function(){
      $(this).cycle('pause');
    });

});
</script>


/* SLIDESHOW */

<div class="slideshow" style="height:240px" id="slideshow1"/>
  <img src="image/1.jpg" alt="image" border="0" width="290" height="240" /> <img src="image/2.jpg" alt="image" border="0" width="290" height="240" />
  <img src="image/3.jpg" alt="image" border="0" width="290" height="240" />
</div>