Javascript 暂停jQuery动画

我正在为一个网站写这个插件，有一件事真的让我头疼。它是什么：

您在右侧看到的内容，除了由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);
});

$this.css（{position:'relative'}）.wrap（“”）
.parent（）.bind（'mouseenter'，function（））{
$img=$（this.find（'img'））
_移动量=$img.height（）-$（this.height（）；
如果（$img.css（'top'）！='auto'&&$img.css（'top'）！='0px'）{
_移动金额=\u移动金额+parseInt（$img.css（'top'）.split（'px'）[0]）；
}
$（this）.find（'img'）.animate（{top:'-='+\u movement\u amt+'px'}，3000，'linear'））
}).bind（'mouseleave'，function（）{
$（this.find（'img'）.animate（{top:'0'}，1000）；
});

这就是代码示例。问题是，当你在顶部悬停时，让它以1000像素的速度滚动500，然后再次悬停，这是一个较慢的动画，这是正确的。。。因为现在它只需要在同一时间（3秒）内再增加500个像素，就像1000像素一样。我尝试使用

.stop（）

，但我不确定如何重新启动悬停动画？

看看jQuery网站上的搜索结果。它显示了如何在mouseout上暂停动画，并在mouseover上再次恢复。（我在下面列出了代码，以便将来寻找它的人可以在一个位置找到它。我没有写这段代码。）

/*脚本*/
$（文档）.ready（函数（）{
$（'div.slideshow'）。循环({
外汇：“淡出”，
速度:300,，
超时：800
});
$（“div.slideshow”）.cycle（'pause'）；//默认情况下暂停动画
$（“div.slideshow”）.mouseover（函数（）{
$（此）.cycle（'resume'）；
}).mouseout（函数（）{
$（this.cycle（'pause'）；
});
});
/*幻灯片放映*/

您是否考虑过制作一个或多个演示文稿？那么……那将是一个“不”，那么=对不起。事情发生了。我在这两个网站上都试了大约一个小时，但无论出于什么原因，我都无法让它在这些网站上运行。。。我正要浏览一个开发页面，但不幸的是我不得不出去了很抱歉隐马尔可夫模型。。。这似乎是在使用循环插件tho？@Oscar-是的……很好。我不确定是否可以使用插件来帮助您。

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