我对淡化某些元素有一点小问题。 这是我的榜样:
当您将鼠标悬停在黑色方块上时,会显示灰色方块并显示“一些文字” 当你鼠标移动时,一切都应该进入开始状态。
主要问题是在广场上快速鼠标悬停和鼠标移动。然后文本“一些文字”不fadeOut。如何更改代码以修复此错误?
我使用了.stop()
,但它没有解决问题
答案 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
}
});