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

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

问题描述:

所以,这是我来自社区的第一个问题.

So, here is my first question from community.

问题:我正在尝试显示div&使用动画增加悬停的div的宽度.

Question: I am trying to show a div & increase width of hovered div with animation.

问题:我通过 jquery & css 但是,问题在于连续悬停动画不会停止.因此,一旦鼠标移出div,我想从内存中刷新以前的动画.

Problem: I achieved this by jquery & css but, the problem is on continuous hovering the animation don't stop. So, i want to flush the previous animation from memory once the mouse is out of the div.

我搜索并找到了类似stop()这样的东西,但没有得到想要的结果.

I searched and found something like stop() to be used but i am not getting the desired result.

检查我已经取得的成就

提前谢谢!

所以,感谢大家的回答&特别感谢@Raminson.

So, Thanks to everyone for answering & special thanks to @Raminson.

我试图阅读&了解stop()&终于我明白了我想要的东西

I tried to read & understand stop() & finally i figured out what i want

我使用了stop(true, false)

true 将删除排队的动画. false 不会使动画跳到结尾

true will remove the queued animation. false will not make animation jump to end

它奏效了: 演示

And it worked: 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');
});​