使用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. HDOJ1059(多重部分和问题)

    #include<cstdio> #include<cstring> using namespace std; +; ]; int dp[SIZE]; bool check() ...

  2. 利用src.rpm包修改源码后重新制作rpm包

    1. 下载 .src.rpm包.例:https://repos.fedorapeople.org/repos/openstack/EOL/openstack-grizzly/epel-6/openst ...

  3. stm32之UCOS-III

    一.UCOS-III 学习UCOS-III,一般会学习以下内容: 任务创建.删除.挂起.恢复等: 临界区:独占CPU,尽量少用,否则会降低效率: 时间管理:时钟节拍(基于硬件定时器).软件定时器: 互 ...

  4. JDBC编程之数据更新

    -------------------siwuxie095                             JDBC 编程之数据更新             首先下载 MySQL 的 JDBC ...

  5. Learning Python 012 函数式编程 2 返回函数 匿名函数 装饰器 偏函数

    Python 函数式编程 2 返回函数 返回函数的意思就是:函数作为返回值.(高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回.) 举个例子:实现一个可变参数的求和. 正常的函数: de ...

  6. Cannot uninstall 'enum34'. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.

    更新tensorflow时遇到报错 Found existing installation: enum34 1.0.4Cannot uninstall 'enum34'. It is a distut ...

  7. hdu1069

    #include <iostream> #include <algorithm> #include <cstring> using namespace std; c ...

  8. ARC085F（动态规划，线段树）

    #include<bits/stdc++.h>using namespace std;const int maxn = 0x3f3f3f3f;int mn[801000];int cost ...

  9. C#判断字符串是否是数字最简单的正则表达式

    if (theStr!= null)//注意加非空判断,否则报错 { System.Text.RegularExpressions.Regex rex = new System.Text.Regula ...

  10. 【转载】GlusterFS六大卷模式說明

    本文转载自翱翔的水滴<GlusterFS六大卷模式說明> GlusterFS六大卷說明 第一,分佈卷 在分布式卷文件被随机地分布在整个砖的体积.使用分布式卷,你需要扩展存储,冗余是重要或提 ...