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 ...
随机推荐
- OIer应该知道的二进制知识
计算机使用\(2\)进制,这是众所周知的.在学习\(OI\)的过程中,\(2\)进制也显得尤为重要.有时候,细节决定成败,所以我想总结一下容易被遗忘和误解的关于\(2\)进制的知识. 1.运算符 &a ...
- 找工作——JVM内存管理
1. JVM类加载机制 类从被加载到虚拟机内存开始,到卸载出内存为止,它的整个生命周期包括:加载.连接(验证.准备.解析).初始化.使用和卸载阶段. 加载:根据查找路径找到对应的class文件,然后倒 ...
- python中string和bool的转换
python中字符串"True" 和 "False"转为bool类型时, 不能通过bool(xx)强转. 注意是因为在python中,除了'& ...
- webpy+nginx+uwsgi安装配置
转:(1)安装Nginx1.1 下载nginx-1.0.5.tar.gz并解压1.2 ./configure (也可以增加--prefix= path指定安装路径)此时有可能会提示缺少pcre支持,如 ...
- HDU1257(简单DP)
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- druid数据源的加密解密工具
数据库得加密 先来一个网上大多数的教程吧,一个比较好的教程,如下. jar包版本:druid-1.0.13.jar 1. 加密,用以下命令将用户名和密码加密 cmd命令行执行 java -cp D:/ ...
- Otter入门简介
一.Otter简介 1.1 otter是什么? otter 译意: 水獭,数据搬运工 语言: 纯java开发 定位: 基于数据库增量日志解析,准实时同步到本机房或异地机房的mysql/oracle数 ...
- rails Ajax--利用Jquery
view function init_tree(product_name) { var htmlobj=$.ajax({url: "get_all_file?param=" + p ...
- C++类和对象的一个简单的实例
题目:找出一个整形数组中的元素的最大值 下面,我们用类和对象的方法来做. #include<iostream> using namespace std; class Array_max{ ...
- Hive与Hbase结合使用
hive的启动需要使用到zookeeper, 所以, 要么自己搭建zookeeper, 要么跟其它东西一起使用, 我这里做的是跟hbase一起使用的zookeeper, 因为hbase自带zookee ...