要被jQuery冒泡搞疯掉了 在线等..急!
本文介绍了要被jQuery冒泡搞疯掉了 在线等..急!的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我在写一个小特效,就是鼠标移入让div显示,移出让div隐藏。
但是不知道怎么了,只要鼠标移入div,就会不停的显示隐藏显示隐藏,看起来就是闪来闪去的。
开始用的是hover和mouseleave,然后不行,就用了mouseenter和mouseleave,结果还是不行...
求大佬指条明路啊,我次次都出现这个情况,后来在移入事件末尾加了 return false.依然...还是闪闪闪...
代码如下:
<div style="position:relative;">
<div id="hehe"></div>
<div id="haha">
<div id="xixi"></div>
</div>
</div>
//移入id为hehe的div,让id为haha的div显示并有大小变化的动画。
$('#hehe').mouseenter(function(){
$('#haha').css({
"display":"block"
}).stop().animate({
width:"495px",
height:"735px",
left:"45px",
top:"40px"
},"fast")
//id为xixi的div是haha的一个子元素
$('#xixi').stop().animate({
width:"450px",
height:"688px",
left:"21px",
top:"22px"
},"fast")
return false
})
//然后是移出,不写移出的时候没问题,一写移出,完犊子了...
$('#hehe').mouseleave(function(){
$('#haha').css({
"display":"none"
})
})
解决方案
不是很清楚你的佈局,如果你裏面的dvi 全是用了 absolute定位 那麽 你的haha div 是會在hehe 上面的,也就是說你的 haha一出來 會觸發 hehe的離開事件,看上去會閃。還有animate這個東西是異步的,如果有先後循序應該放在回雕 函數裏面。
$('#haha').css({
"display":"block"
}).animate({
width:"495px",
height:"735px",
left:"45px",
top:"40px"
},"fast",function(){
$('#xixi').animate({
width:"450px",
height:"688px",
left:"21px",
top:"22px"
},"fast")
})
这篇关于要被jQuery冒泡搞疯掉了 在线等..急!的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文