首先来看一段代码:
$(document).ready(function() { $("div.div1").mouseover(function() { $("div.div2").animate({bottom:'10px'},1000); }) $("div.div1").mouseout(function() { $("div.div2").animate({bottom:'-50px'},1000); }) });
上述的代码很简单,我之所以没有用 hover() 来写,是因为我想让代码思路更清晰,更容易理解!它所实现的效果就是将鼠标放在class为“div1”的div上,class为“div2”的div的bottom值为“10px”,将鼠标移开,其值将变为“-50”px,就是一个class为div2上下移动的效果,可是当我快速将鼠标放在class为div1的div上,然后快速移开,以此反复几次,然后你会发现那个class为div2的div在那不停的一上一下,此时,我的鼠标已经没动了,这个效果很差,事件延迟触发,然后我就在想,怎么解决,刚开始,想到使用omouseenter代替了你原来的mouseover,使得第一次触发事件后,在对象区域反复移动将不再继续触发,然后觉得也可以使用:not(:animated)来判断当前对象是否正在执行动,还想到了preventDefault();结果都有一一去验证,去实现,有的出结果了,但效果还是不理想,有的还没出结果。。。。。
最后,我想到了jQuery的 stop(), 它的作用是停止当前正在运行的动画,只要将目前正在运行的动画停下来,然后在实现往上往下移动就好,然后写下了如下代码:
$('div.div1').hover( function() { $("div.div2").stop().animate({bottom:'10px'},1000);}) }, function() { $("div.div2").stop().animate({bottom:'-50px'},1000);} } );
结果解决了jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题,而且动画效果很友好。
mouseover和mouseout在低版本的浏览器会出现闪动的现象
鼠标滑过的时候出现一个层,当鼠标滑到当前层mouseover和mouseout在低版本的浏览器出现闪动现象——解决这个现象的办法不止一种,最简单的把mouseover和mouseout换成对应的mouseenter和mouseleave。
当鼠标指针位于元素上方时,会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。
当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
注意:mouseover ,mouseout当鼠标指针穿过被选元素子元素时,也会触发事件。这在绑定事件时,有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。