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 ...
随机推荐
- BZOJ4009：[HNOI2015]接水果
浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...
- POJ 1046 Color Me Less(浅水)
一.Description A color reduction is a mapping from a set of discrete colors to a smaller one. The sol ...
- 一：安装Scala
Scala是一种类似Java的纯面向对象的函数式编程语言,由于函数具有明确的确定输入对确定输出的关系,所以适合推理和计算,一切函数都可以看成一系列的计算组成,另外由于Scala函数是没有副作用和透明的 ...
- 安装mariadb并修改配置文件
实验环境:CentOS7 #安装mariadb-server包#修改mariadb配置文件/etc/my.cnf.d/server.cnf#添加 skip_name_resolve=ON #不执行将I ...
- js---倒计时的自动跳转.html
============================================================================== 倒计时的自动跳转.html <!DO ...
- 使用变参函数实现pwd命令
#include "stdafx.h"#include <Windows.h> #define DIRNAME_LEN (MAX_PATH+2) BOOL PrintS ...
- C/C++常用数学函数
math.h/cmath(C++)数学函数库 1 三角函数 double sin (double); double cos (double); double tan (double) ...
- List for game to play latter
1.The Elder Scrolls V 2.Border Lands 1,2 3.Mind Killer 4.Dark Soul 2 5.Watch Dog 6.Valkyria Chronicl ...
- Centos 查看机器型号
测试机器的硬件信息: 查看CPU信息(型号) # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 8 Intel(R) Xeon(R) CP ...
- cygwin运行git submodule init出错error while loading shared libraries的解决
installing the Devel\gettext package should solve your problem. git-submodule requires that. Unfortu ...