繁体   English   中英

暂停jQuery动画

[英]Pausing a jQuery Animation

我正在为网站编写此插件,而这一件事确实困扰着我。 它是什么: 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()但是我不确定如何再次在悬停时重新启动动画?

看一下在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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM