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>
    

      

     
  • 相关阅读:
    SourceTree 3.3.6安装跳过注册安装
    Qt Framework 问题之 framework/Versions/A:bundle format unrecognized, invalid, or unsuitable
    数据结构之栈
    数据结构之单链表
    数据结构之数组
    QPixmap 在非QtCreator环境下无法显示jpg图片
    Mac端StartUML的安装和破解
    C++实现根据路径读取文件内容
    迁移至知乎
    XDRender_LightModeFeature_CauseLight 焦散1-DropRain
  • 原文地址:https://www.cnblogs.com/regit/p/9002392.html
Copyright © 2011-2022 走看看