div绑定鼠标离开事件，隐藏div，但是我快速离开时，div不会隐藏

源自：1-3 jQuery中显示元素的show方法

div绑定鼠标离开事件，隐藏div，但是我快速离开时，div不会隐藏

<div class="left">

<div id="a1-1">第一个DIV</div>

<div id="a1">第一个DIV</div>

<div id="a2-2">第二个DIV</div>

<div id="a2">第二个DIV</div>

<div id="a3-3">第三个DIV</div>

<div id="a3">第三个DIV</div>

<div id="a4-4">第四个DIV</div>

<div id="a4">第思个DIV</div>

<div id="a5-5">第五个DIV</div>

<div id="a5">第五个DIV</div>

<script type="text/javascript">

$("#a1-1,#a2-2,#a3-3,#a4-4,#a5-5").mouseover(function() {

$(this).hide(1000);

$(this).next().show(1000);

});

$("#a1,#a2,#a3,#a4,#a5").mouseout(function() {

$(this).hide(1000);

$(this).prev().show(1000);

});

</script>

</div>

提问者：自学的人 2017-01-12 17:10

个回答

我就叫李二毛

2017-01-12 22:56:10

我不知道你想表达什么。你的代码，我们分析一下，初始是全部都显示的。
当鼠标移入#a1-1,#a2-2,#a3-3,#a4-4,#a5-5 id为这些的时候，这些div隐藏。时间为1s。然后#a1-1,#a2-2,#a3-3,#a4-4,#a5-5这些div的下面的兄弟开始显示，时间为一秒，（这时候下面的#a1,#a2,#a3,#a4,#a5" 也就是这些已经是显示的，所以没效果。）当你鼠标移出（#a1,#a2,#a3,#a4,#a5"），这些的时候，你设置的是隐藏，时间为1s，但是你的下一句$(this).prev().show(1000); 这个，又将上面的（#a1-1,#a2-2,#a3-3,#a4-4,#a5-5）这些给显示出来。所以你鼠标移入移出的时候，活循环调用（#a1-1,#a2-2,#a3-3,#a4-4,#a5-5），这些和（#a1,#a2,#a3,#a4,#a5）这些的显示隐藏啊，效果就看像两个div来回切换的样子啊。我觉得是你写的代码有问题，你自己在好好寻思寻思。

1