[英]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.