悬停事件结束后div的动画不停止

问题描述：

因此，这是我的第一个来自社区的问题。悬停事件结束后div的动画不停止

问：我试图表现出徘徊div与动画div &增加宽度。

问题：我通过的jQuery & CSS实现这一点，但，问题是持续徘徊在动画不停止。所以，我想在鼠标不在div的时候从内存中刷新以前的动画。

我搜索并找到类似stop()的东西，但我没有得到想要的结果。

Check what i have achieved yet

提前感谢！

它认为这将使用全给你的http：//的jsfiddle .net/fsF3W/4/ – MMK 2012-07-28 12:01:26

@MMK没有其行为与我发布的相同。我没有发现它有帮助。 – SVS 2012-07-28 18:34:19

答

所以，感谢大家的回答&特别感谢@Raminson。

我试图读取&了解stop() &最后我想通了，我想要什么

我用stop(true, false)

真正将删除排队的动画。假不会使动画跳到结尾

和它的工作：Demo

jQuery代码：

$('#slider_thumbnail li .slide_thumb').hover(function(e){ 

       $(this).find('.slide_btn').stop(true, false).animate({width:240}); 
       $(this).find('.image-wrapper').stop(true, false).show('slow'); 
      },function(e){ 

       $(this).find('.slide_btn').stop(true, false).animate({width:125}); 
       $(this).find('.image-wrapper').stop(true, false).hide('slow'); 
});

答

你应该stop()前animate()方法使用，请尝试以下操作：

$('#slider_thumbnail li .slide_thumb').hover(function(e){ 
    $(this).find('.slide_btn').stop().animate({width:240}); 
    $(this).find('.image-wrapper').show('slow'); 
},function(e){ 
    $(this).find('.slide_btn').stop().animate({width:125}); 
    $(this).find('.image-wrapper').hide('slow'); 
});

DEMO

这是闪烁的动画 – 2012-07-28 11:51:40

嘿！它现在处于更好的状态，但是，正如@SJGJ所说，其闪烁和停止多次悬停后，它显示一次完整的图像和隐藏。但是，感谢让它变得更好。 +1对你来说 – SVS 2012-07-28 11:57:26

@SVS嘿，不客气，你也可以使用图片的动画功能，并为它们指定持续时间。 – undefined 2012-07-28 12:05:36

答

我以前用过hoverIntent插件这个问题，它的工作非常出色。也许你想试试这个：

谢谢！为答案。我在检查这个插件之前检查它是否正常并且它也可以工作。但是，我不想使用任何额外的插件。但这会帮助其他人为此+1。 – SVS 2012-07-28 11:53:54

答

我很欣赏它不是你想要的，但我很无聊，想要做到这一点。你想要什么（我觉得）

纯CSS版本：http://jsfiddle.net/fsF3W/5/

悬停事件结束后div的动画不停止

相关推荐