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个1000px，然后再次悬停它是一个较慢的动画，这是正确的......因为现在它只需要在同一时间（3秒）内再增加500个像素它做了1000px。我尝试使用.stop()，但我不确定如何在悬停时重新启动动画？

Answer 1

看一下jQuery网站上的this example。它显示了如何在onmouseout上暂停动画并在onmouseover上再次恢复。（我列出了下面的代码，所以将它们全部放在一个位置，以供将来寻找它的人使用。我没有写这段代码。）

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

暂停jQuery动画

1 个答案: