使用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的更多相关文章

  1. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  2. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  3. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

  4. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  5. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  6. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  7. jQuery鼠标移入移出(冒泡版和无冒泡版)

    带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件 没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件

  8. echarts+百度地图+vue 填坑记（一）（百度地图、鼠标移入移出标注,信息框会产生闪烁）

    大概七月底开始实习,到现在经历了两个完整的项目(c2b). 因为开发时间紧,任务重,所以在开发过程踩到的坑都没时间去记录. 现在在开发一个某链运输监控系统,到了收尾阶段,有时间写博客了!开心! 一.鼠 ...

  9. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

随机推荐

  1. github 在线 创建文件夹

    参考: http://webapps.stackexchange.com/questions/36411/create-a-folder-in-github-via-the-web-interface

  2. 洛谷【P1303】A*B Problem

    题目传送门:https://www.luogu.org/problemnew/show/P1303 高精度乘法板子题,灵性地回忆一下小学时期列竖式的草稿纸即可. 时间复杂度:\(O(len^2)\) ...

  3. 洛谷【P1601】A+B Problem（高精）

    题目传送门:https://www.luogu.org/problemnew/show/P1601 高精度加法板子.我们灵性地回忆一波小学学加法列竖式的场景(从\(6\)岁开始口算从未打过草稿的大佬请 ...

  4. 【转】Pro Android学习笔记（十八）：用户界面和控制（6）：Adapter和AdapterView

    目录(?)[-] SimpleCursorAdapter 系统预置的layout ArrayAdapter 动态数据增插删排序 自定义TextView风格 其他Adapter AdapterView不 ...

  5. 问题：sqlserver if；结果： SqlServer if else和case

    SqlServer if else和case 分类: SQLSERVER 2013-03-01 16:51 11328人阅读 评论(0) 收藏 举报 行转列 目录(?)[+] if else 要提示的 ...

  6. linux命令-tar打包和压缩并用

    tar在打包的时候进行压缩 支持 gzip bzip2 xz 格式 -z  gzip格式 -j  bzip2格式 -J  xz格式 压缩打包 [root@wangshaojun ~]# tar -zc ...

  7. js中的Number方法

    1.Number.toExponential(fractionDigits) 把number转换成一个指数形式的字符串.可选参数控制其小数点后的数字位数.它必须在0~20之间. 例如: documen ...

  8. 使用struts2进行文件下载以及下载权限控制的例子

    本测试有两个模块,一个是文件上上传,一个是文件下载,文件下载的时候会检查是否足有权限,如果没有,就会转发到登录页面,如果有权限,就会直接启动下载程序,给浏览器一个输出流. 下面直接上我的代码: 登录表 ...

  9. 任务调度TimerTask&Quartz的 Java 实现方法与比较

    文章引自--https://www.ibm.com/developerworks/cn/java/j-lo-taskschedule/ 前言 任务调度是指基于给定时间点,给定时间间隔或者给定执行次数自 ...

  10. 学习过程的记录：实验室电脑上的jdk环境变量

    亲爱的,先区分安装路径和软件的存放路径好不好呢? 1.变量名:JAVA_HOME 变量值:D:\Program Files\Java\jdk1.7.0_21 2. 编辑 Path(粘贴到最后) %JA ...