想实现一个类似于二级菜单的功能,用两个div表示。
鼠标移到div1上时,先展开div1,再展开div2,移出时则相反。
问题是,当用鼠标很快地在div1上划过后,再把鼠标移到div1上,div1会展开,但是div2不显示了。
想了很久没想通,求分析。。
<div style="width:100px;height:30px;position:relative;background-color:Green;line-height:30px;" id="div1">
div1
<div style="width:200px;height:200px;position:relative;background-color:red;display:none" id="div2">div2</div>
</div>
$(function(){
$("#div1")
.mouseenter(function(){
$(this).animate({"width":"200px"},"slow",function(){
$("#div2").slideDown("slow");
});
})
.mouseleave(function(){
$("#div1").stop();
$("#div2").slideUp("slow",function(){
$("#div1").animate({"width":"100px"},"slow");
});
});
});
鼠标移到div1上时,先展开div1,再展开div2,移出时则相反。
问题是,当用鼠标很快地在div1上划过后,再把鼠标移到div1上,div1会展开,但是div2不显示了。
想了很久没想通,求分析。。
<div style="width:100px;height:30px;position:relative;background-color:Green;line-height:30px;" id="div1">
div1
<div style="width:200px;height:200px;position:relative;background-color:red;display:none" id="div2">div2</div>
</div>
$(function(){
$("#div1")
.mouseenter(function(){
$(this).animate({"width":"200px"},"slow",function(){
$("#div2").slideDown("slow");
});
})
.mouseleave(function(){
$("#div1").stop();
$("#div2").slideUp("slow",function(){
$("#div1").animate({"width":"100px"},"slow");
});
});
});
mouseleave和mouseenter是什么啊
div1
<div style="width:200px;height:200px;position:relative;background-color:red;display:none" id="div2">div2</div>
</div>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function(){
$("#div1").mouseover(function(e){
if(e.target==$(this).get(0)){
$(this).animate({"width":"200px"},"slow",function(){
$("#div2").slideDown("slow");
});
}
}).mouseout(function(e){
if($("#div1").find(e.target).size()==0){
$("#div1").stop();
$("#div2").slideUp("slow",function(){
$("#div1").animate({"width":"100px"},"slow");
});
}
});
});
</script>
果然有用,谢谢。不过能解释下为什么吗?为什么直接移到div1上可以显示div2,而快速划过后再移上去就不显示?
也正是这个样式导致div2超出了div1的限定高度30,而不再显示出来。
所以只要不限定div1的高度即可解决问题。采用jQuery的动画效果时需慎重,如果前一个效果还未完成,就开始下一个效果,很容易发生CSS混乱的到无法控制的情况。
当多个动画效果叠加时,有时连jQuery自己都无法判断,哪些是元素的原始样式,哪些是为了制作动画效果而临时增加的。