div的动画在hover事件结束后不会停止

所以，这是我社区的第一个问题。

问题：我试图通过动画显示div和增加hoverdiv宽度。

问题：我通过jquery ＆ css实现了这个，但问题是在连续盘旋动画时不要停止。 因此，一旦鼠标离开div，我想从内存中刷新上一个动画。

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

检查我已经取得的成就

提前致谢！

Answer 1

你应该在animate()方法之前使用stop() ，尝试以下方法：

 $('#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

Answer 2

我之前使用过hoverIntent插件这个问题，它运行得很好。 也许你想试试这个：

Answer 3

我很欣赏它不是你想要的，但我很无聊，想要去做。

我想要的纯CSS版本（我认为）： http ： //jsfiddle.net/fsF3W/5/

Answer 4

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

我试着阅读并理解stop() ＆最后我想出了我想要的东西

我用stop(true, false)

true将删除排队的动画。 false不会让动画跳转到最后

它起作用了： 演示

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'); });​