使用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. gulp之压缩css

    /** * css压缩 * npm install --save-dev gulp-minify-css * npm install --save-dev gulp-rename * * * 可参考: ...

  2. BZOJ5289：[HNOI2018]排列

    我对贪心的理解:https://www.cnblogs.com/AKMer/p/9776293.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...

  3. Poj1062 昂贵的聘礼 （dijkstra算法）

    一.Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请求酋长 ...

  4. 【转】Unity3D如何制作落叶效果

    原文地址:http://hi.baidu.com/cupgenie/item/c23861df692f59e3b3f777a8 创建一个粒子系统 GameObject>Create other& ...

  5. 对API的理解

    一. API(Application Programming Interface,应用程序编程接口) 1)定义:API是远程服务器或者操作系统的一些函数,是它们的一部分: 2)功能:用来接收应用程序( ...

  6. 【转】 Pro Android学习笔记（二七）：用户界面和控制（15）：FrameLayout

    FrameLayout FrameLayout通常只包含一个控件.如果我们在FrameLayout中设置多个控件,则第二个控件会堆叠在第一个控件上面,如此类推,一层一层地叠上去.下面的例子,我们在Fr ...

  7. unittest ，ddt数据驱动，读取文件中数据，多个参数时的处理

    1. test.yaml中的数据 这里的属性是list 2.创建用例 3,在yaml中创建数据,创建list数据,list中再创建dict数据,这样就可以读取dict中的多个参数的数据了

  8. 启动新内核出现：No filesystem could mount root, tried: ext3 ext2 cramfs vfa

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51841791 下载新编译的内核出现:No filesystem could mou ...

  9. DevExpress 显示进度条

    1.使用了DevExpress的WaitDialogForm WaitDialogForm waitDialogForm = null; new Thread((ThreadStart)delegat ...

  10. hive查询ncdc天气数据

    使用hive查询ncdc天气数据 在hive中将ncdc天气数据导入,然后执行查询shell,可以让hive自动生成mapredjob,快速去的想要的数据结果. 1. 在hive中创建ncdc表,这个 ...