Приостановка анимации jQuery

Question

Я пишу этот плагин для сайта, и это одна вещь действительно меня беспокоит. Что это: http://pixelmatrixdesign.com/work/detail/silicon_florist/

То, что вы видите справа, за исключением того, что оно активируется посредством mouseenter и сбрасывается при 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);
});

Это пример кода. Проблема в том, что, когда вы наводите курсор сверху, позволяете ему прокручивать 500 из 1000 пикселей, а затем снова парите, это медленная анимация, которая является правильной ... потому что теперь нужно только пройти еще 500 пикселей за то же время (3 секунды) это было с 1000px. Я пытался использовать .stop(), но я не уверен, как снова запустить анимацию при наведении курсора?

Answer 1

Взгляните на этот пример , найденный на веб-сайте jQuery.Он показывает, как приостановить анимацию и возобновить ее снова.(Я перечислил код ниже просто так, чтобы все это было в одном месте для людей, которые ищут его в будущем. Я не писал этот код.)

/* 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>