jquery mouseover / mouseout probel

时间:2013-12-15 23:13:33

标签: jquery

我对淡化某些元素有一点小问题。 这是我的榜样:

http://jsfiddle.net/7uXtw/

当您将鼠标悬停在黑色方块上时,会显示灰色方块并显示“一些文字” 当你鼠标移动时,一切都应该进入开始状态。

主要问题是在广场上快速鼠标悬停和鼠标移动。然后文本“一些文字”不fadeOut。如何更改代码以修复此错误?

我使用了.stop(),但它没有解决问题

1 个答案:

答案 0 :(得分:0)

隐藏数据溢出

我刚刚在css中将overflow:hidden添加到a,它看起来效果很好。

.info_text大于其a父级,因此mouseleave在您清除它之前不会触发。

<强> jquery的 此停止和停止配置(true,true)似乎可以解决问题

$("#options_down li").delegate('a','mouseover mouseleave', function(e){
    if (e.type == 'mouseover') {//on mouseover
        $(this).find('img').stop().animate({ top: '+36px'},100).end()//img down
        .find(".info").stop().animate({ height: '136', opacity: 0.8 }, 100).end()//info out
        .find('.info_text').stop(true,true).delay(100).fadeIn(100).end()//infotext in
        .find('.info p, .info h3').stop().fadeOut(100);//hide innards
    } else if (e.type == 'mouseleave') {//on mouseleave
        $(this).find("img").stop(true,true).animate({ top: '0px' },100).end()//img up
        .find(".info").stop(true,true).animate({ height: '40', opacity: 1 }, 100).end()//info in
        .find('.info_text').stop().fadeOut(100).end()//infotext out
        .find('.info p, .info h3').stop(true,true).fadeIn(100);//show innards
    }
});

做了一个小提琴:http://jsfiddle.net/filever10/rb48W/