jQuery的mouseover和mouseout事件当快速移动 事件延迟触发问题

本文探讨了在使用jQuery时遇到的mouseover和mouseout事件在快速移动元素时延迟触发的问题。通过分析代码示例,提出利用stop()方法停止当前动画,从而解决事件响应延迟的方案。
摘要由CSDN通过智能技术生成

首先来看一段代码:

<span style="font-family:SimHei;font-size:14px;">$(document).ready(function(){

    $("div.div1").mouseover(function()

       {$("div.div2").animate({bottom:'10px'},1000);})

    $("div.div1").mouseout(function()

       {$("div.div2").animate({bottom:'-50px'},1000);}
    )
});</span>

上述的代码很简单,我之所以没有用 hover() 来写,是因为我想让代码思路更清晰,更容易理解!它所实现的效果就是将鼠标放在class为“div1”的div上,class为“div2”的div的bottom值为“10px”,将鼠标移开,其值将变为“-50”px,就是一个class为div2上下移动的效果,可是当我快速将鼠标放在class为div1的div上,然后快速移开,以此反复几次,然后你会发现那个class为div2的div在那不停的一上一下,此时,我的鼠标已经没动了,这个效果很差,事件延迟触发,然后我就在想,怎么解决,刚开始,想到
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值