jquery——解决鼠标移入移出导致盒子不停移动的bug
使用mouseover()、mouseout()时会出现这样一种情况，鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('.box').mouseover(function () {
$(this).animate({marginTop:100});
});
$('.box').mouseout(function () {
$(this).animate({marginTop:50});
})
})
</script>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color: hotpink;
margin:50px auto;
}
</style>
</head>
<body>
<div class="box" id="div"></div>
</body>
</html>
此时会有这种bug：
解决方法：在mouseover()和mouseout（）前面加上stop（）就好啦！
<script type="text/javascript">
$(function () {
$('.box').mouseover(function () {
$(this).stop().animate({marginTop:100});
});
$('.box').mouseout(function () {
$(this).stop().animate({marginTop:50});
})
})
</script>
jquery——解决鼠标移入移出导致盒子不停移动的bug的更多相关文章
- Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
- jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout
hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...
- jquery事件一 ---鼠标移入移出
比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- jQuery鼠标移入移出(冒泡版和无冒泡版)
带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件 没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件
- echarts+百度地图+vue 填坑记（一）（百度地图、鼠标移入移出标注,信息框会产生闪烁）
大概七月底开始实习,到现在经历了两个完整的项目(c2b). 因为开发时间紧,任务重,所以在开发过程踩到的坑都没时间去记录. 现在在开发一个某链运输监控系统,到了收尾阶段,有时间写博客了!开心! 一.鼠 ...
- js鼠标移入移出效果【原】
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...
随机推荐
- NSArray用法
//类方法初始化一个数组对象 [array count] : 得到这个数组对象的长度. [array objectAtIndex index]: 传入数组的索引(index) 得到数据对象. [arr ...
- puppet多环境配置（puppet自动化系列2）
三.Puppet多环境部署 我们为puppetmaster建立3个环境,它们分别是开发环境(jqdev).测试环境(jqtest).生产环境(jqprd). 3.1 配置puppet.conf 在标签 ...
- PHP7三元运算符 ?? 和 ?: 的区别
1. (expr1) ?? (expr2) 是 PHP7才有的功能,等同于: isset(expr1) ? expr1 : expr2 ; 2.(expr1) ?: (expr2) 是PHP5.3才 ...
- PHP二维数组，根据多个字段来排序
如果是最最常见的二维数组排序, 大多数情况下也只用到二维: 用php内置函数 array_multisort( ) 是最简单的: <?php 假设, $arr 是一个二维数组, $arg1是取 ...
- jsp 路径问题
<script type="text/javascript" src="<%=ApplicationContextUtil.getBasePath(r ...
- python使用GUI（图形用户界面）
打开后: File→New File(Ctrl + N)
- 树莓派 Learning 002 必备的操作 --- 08 实现PC端 远程登入 树莓派 --- 法1 远程登入树莓派的命令行状态
树莓派 必备的操作 - 实现PC端 远程登入 树莓派 - 法1 远程登入树莓派的命令行状态 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 ...
- php学习笔记-php中把浮点数转化为整数
在php中有时候会遇到比如 14.6%3这种操作,php是会先把14.6转化为整数再做其它的操作,那么这个转化为整数的操作是floor(14.6)还是ceil(14.6)还是round(14.6)呢? ...
- Centos 查看机器型号
测试机器的硬件信息: 查看CPU信息(型号) # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 8 Intel(R) Xeon(R) CP ...
- ASCII 说明
ASCII 说明 ASCII 码使用指定的 7 位或 8 位二进制数组合来表示 128 或 256 种可能的字符.标准 ASCII 码也叫基础ASCII码,使用 7 位二进制数来表示所有的大写和小写字 ...