2

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

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

问题： 我通过jquery & css实现了这一点，但是问题在于连续悬停动画不会停止。所以，一旦鼠标离开 div，我想从内存中刷新上一个动画。

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

检查我已经取得的成就

提前致谢！

4

4 回答 4

4

您应该使用stop()beforeanimate()方法，尝试以下方法：

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

演示

于 2012-07-28T11:49:17.253 回答
1

我之前使用过 hoverIntent插件来解决这个问题，效果很好。也许你想试试这个：

于 2012-07-28T11:49:22.917 回答
0

所以，感谢大家的回答，特别感谢@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');
});​
于 2012-08-01T08:16:51.857 回答
0

我很感激这不是你想要的，但我很无聊，想这样做。

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

于 2012-07-28T12:20:12.443 回答