使用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. Sentry的要点

    1.Apache的Build 在研究Sentry的时候,发现没有bin.jar,只能手工编辑工程,但是编辑发现很多jar包有问题:在访问官网的时候发现左侧菜单中有一项是builds,点开后(https ...

  2. 洛谷【P1358】扑克牌

    我对状态空间的理解:https://www.cnblogs.com/AKMer/p/9622590.html 题目传送门:https://www.luogu.org/problemnew/show/P ...

  3. Azure自动化部署服务 (1)

    Azure中已经发布了自动化部署服务的PaaS功能. 本文将介绍自动化服务Automation初始化过程. 在Azure Management Portal上左边可以看到Azure的各种服务,其中一项 ...

  4. redis的read error on connection错误解决

    昨日,公司php调用redis报错:read error on connection 2015-01-29 23:59:050.13330000,redis存放的是用户session. 在网上查询,大 ...

  5. IOS+openCV在Xcode的入门开发

    昨天折腾了一天,终于搞定了openCV+IOS在Xcode下的环境并且实现一个基于霍夫算法的圆形识别程序.废话不多说,下面就是具体的折腾流程: ---------------------------- ...

  6. mouseenter与mouseover的区别

    mouseover 事件:只有在鼠标指针穿过被选元素时,才会触发. mouseover 事件:鼠标指针穿过任何子元素,都会触发. 请看例子的演示.

  7. (补)Java解析XML之dom4j

    上次记得忘了记最流行的dom4j方法了,用的还是上次的那个XML文件 注:需要添加dom4j.jar文件 package com.xujingyang.dom4j; import org.dom4j. ...

  8. Spring pom配置详解(转)

    转载至http://blog.csdn.net/ithomer/article/details/9332071# 原博主注释的很详细 <project xmlns="http://ma ...

  9. EF Code first 和 DDD (领域驱动设计研究)系列一

    在上个公司工作时,开发公司产品的过程中,接触到了EF Code first. 当时,整个产品的架构都是Lead developer设计建立的,自己也不是特别理解,就赶鸭子上架跟着一起开发了. 现在回过 ...

  10. 35.windows提权总结

    本文参考自冷逸大佬的博客,源地址在这里:https://lengjibo.github.io/windows%E6%8F%90%E6%9D%83%E6%80%BB%E7%BB%93/ windows提 ...