zoukankan      html  css  js  c++  java
  • jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别

    mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) mouseleave() 鼠标离开(离开子元素不触发) hover() 同时为mouseenter和mouseleave事件指定处理函数

    用一个有背景的盒子为例子,加上margin-top的动画效果,使鼠标放在盒子上时,让margin-top的值变化而看到盒子上下移动;加上子盒子son后,观察鼠标移入移出小盒子中时的变化;以及解决方案:加入stop()的作用


    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    	<script type="text/javascript">
    		$(function(){
    
    			/*
    
    			进入子元素时会触发,这样写的话有一个bug,当鼠标快速移入移出目标区域时,目标区域会一直变换样式直到实现所有的效果次数。
    			加上stop()后,解决上面的bug
    
    			$('#div1').mouseover(function(){
    				$(this).animate({marginTop:50});
    			});
    
    			$('#div1').mouseout(function(){
    				$(this).animate({marginTop:100});
    			});
    
    			*/
    
    			/*
    			当box盒子里面有一个子元素son盒子时,当鼠标移入移出子元素时,也会触发上面的bug的动画效果
    			若想消除这个问题,需要用到mounseenter, mouseleave,这样进入子元素时不会触发bug效果
    			
    
    			$('#div1').mouseenter(function(){
    				$(this).stop().animate({marginTop:50});
    			});
    
    			$('#div1').mouseleave(function(){
    				$(this).stop().animate({marginTop:100});
    			});
    			*/
    
    			/* 通过hover简写上面的代码,其实就是hover()里面写2个function()作为参数	*/
    			$('#div1').hover(function(){
    				$(this).stop().animate({marginTop:50});
    			},function(){
    				$(this).stop().animate({marginTop:100});
    			});
    
    
    		})
    
    	</script>
    	<style type="text/css">
    		.box{
    			200px;
    			height:200px;
    			background-color:gold;
    			margin:100px auto 0; //居中
    		}
    
    		.son{
    			100px;
    			height:100px;
    			background-color:green;
    		}
    
    	</style>
    </head>
    <body>
    	<div id="div1" class="box">
    		<div class="son"></div>
    	</div>
    </body>
    </html>
    

      

     
  • 相关阅读:
    Javascript的私有变量和方法、共有变量和方法以及特权方法、构造器、静态共有属性和静态共有方法
    Spring4整合Hibernate4出现的错误的解决
    Javascript类的创建
    Kettle学习总结(一)
    Kettle Excel导入数据到数据库
    Python 爬虫 2 (转)
    Js仿腾讯微博效果
    飘雪效果
    列表获取对应图片
    飞入购物车
  • 原文地址:https://www.cnblogs.com/regit/p/9002392.html
Copyright © 2011-2022 走看看