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 ...
随机推荐
- [转]CSS3 Filter的十种特效
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...
- java--序列化及其算法透析
有关Java对象的序列化和反序列化也算是Java基础的一部分,下面对Java序列化的机制和原理进行一些介绍. Java序列化算法透析 Serialization(序列化)是一种将对象以一连串的字节描述 ...
- 人物-IT-雷军：雷军
ylbtech-人物-IT-雷军:雷军 雷军 (全国工商联副主席,小米科技创始人.董事长) 雷军,1969年12月16日出生于湖北仙桃,毕业于武汉大学,是中国大陆著名天使投资人. 雷军作为中国互联网 ...
- PowerDesigner生成CDM模型
一.新建概念数据模型 1)选择File-->New,弹出如图所示对话框,选择CDM模型(即概念数据模型)建立模型. 2)完成概念数据模型的创建.以下图示,对当前的工作空间进行简单介绍.(以后再 ...
- PHP7三元运算符 ?? 和 ?: 的区别
1. (expr1) ?? (expr2) 是 PHP7才有的功能,等同于: isset(expr1) ? expr1 : expr2 ; 2.(expr1) ?: (expr2) 是PHP5.3才 ...
- Material使用05 MdListModule模块 MdButtonToggleModule模块
1 在共享模块中导入MdListModule模块 import { NgModule } from '@angular/core'; import { CommonModule } from '@an ...
- Learning Python 008 正则表达式-003 sub()方法
Python 正则表达式 - sub()方法 sub()方法 sub()方法:替换符合规律的内容,返回替换的值 # -?- coding: utf-8 -?- import re secret_cod ...
- OpenGL — GLFW — 颜色
OpenGL - GLFW - 颜色 参考教程:https://learnopengl-cn.readthedocs.io/zh/latest/02%20Lighting/01%20Colors/ 既 ...
- 1.6 xss挑战平台练习
------------------------- XSS挑战之旅 ------------------------- 最近在学习xss,找到了一个xss练习平台,在线地址:http://test.x ...
- ZOJ 3939 The Lucky Week (暴力找规律)
题意:给定一个幸运日,求第 k 个幸运日是多少. 析:由于闰年,每400肯定会循环一次,所以我们就可以先找出每400年会有多少幸运日,是2058个,然后再暴力. 代码如下: #pragma comme ...