Question

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

问题：我正在尝试展示div＆amp;使用动画增加悬停div的宽度。

问题：我是通过 jquery ＆amp;来实现的。 css 但是，问题在于连续悬停动画不停止。因此，一旦鼠标离开div，我想从内存中刷新上一个动画。

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

提前致谢！

Answer 1

您应该在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

Answer 2

之前我曾使用hoverIntent插件解决此问题，但效果非常好。也许你想试试这个：

Answer 3

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

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

Answer 4

所以，感谢大家回答＆amp;特别感谢@Raminson。

我试过读＆amp;了解stop()＆amp;最后我想出了我想要的东西

我使用了stop(true, false)

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

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

4 个答案: