要被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屋！