有这样一组元素,类似于鼠标滑过换图的效果
<li class="nav_old">111111111</li>
<li class="nav_new">一一一一一</li>
<li class="nav_old">222222222</li>
<li class="nav_new">二二二二二二</li>
<li class="nav_old">3333333333</li>
<li class="nav_new">三三三三三三三</li>
默认下,类为nav_new的是隐藏状态,当鼠标移到nav_old上时,则nav_old隐藏,其后一个nav_new展示。若鼠标离开nav_new,则其隐藏,而其上一个nav_old展示。jquery代码如下:
$(".nav_old").mouseenter(function () {
$(this).next().fadeIn();
$(this).hide();
})
$(".nav_new").mouseleave(function () {
$(this).prev().fadeIn();
$(this).hide();
})
现在问题是:若快速滑动鼠标,隐与现就会乱套。鼠标快速移走时,有些nav_new还是在展示状态。怎么解决这个问题。类似这样的效果困扰了很久了。