JQuery Chapter 4 事件与动画

JQuery Chapter4 事件与动画
<!--
Goal:掌握JQuery中事件的绑定和动画的控制
-->

一,事件的绑定
	事件的分类:blur,focus,load,unload,scroll,click,dblclick,mouseover,mouseout,mouseenter,mouseleave
	mousemove,mousedown,mouseup,keydown,keyup,keypress....
	事件的绑定有两种写法
	1.$("对象名").bind("事件类型",function(){
			//方法体
		});
		
	2.$("对象名").事件类型(funciton(){
			//方法体
		});
		
	两种绑定方法的不同点:
	第2种写法不能将事件移除,而第一种写法通过
	$("对象名")
	.unbind(方法名-没有括号);
	.unbind("事件类型,如:click")
	.unbind("事件类型",方法名-没有括号)
	
二,合成事件
	其实前面我已经讲过了~合成事件就是把原来JS中的两个时间合成了一个事件!
	
	1.$("对象名").hover(function(){
			//mouse enter 事件代码
		},function(){
			//mouse leave 事件代码
		});
		
	2.这个就是很NX的一个方法了!
		$("对象名").toggle(function(){
		
		},function(){
		
		},function(){
		
		},.......);
		
		这个可以写N个方法在里面,默认是鼠标单击触发,触发后会依次调用里面的方法,并且还会循环!
		(发明这个方法的肯定得了不少的奖金)

三,事件的冒泡
	<!--  示例代码
		<div>
			<p><a href="#">Click Me</a></p>
		</div>
		<script type="text/javascript">
			$("div").click(function(){
				alert("What are you doing?I'm DIV");
			});
			$("p").click(function(){
				alert("What are you doing?I'm tag P");
			});
			$("a").click(function(){
				alert("What are you doing?I'm tag a");
			});
		</script>
	-->
	在上面的代码中,如果用户点击了a标签,那么将会触发三个事件!
	所以~你应该懂了我在说什么!
	为了避免这种情况,我们可以在a标签点击事件的末尾写上一个return,如果是表单提交事件~记得~return false;
	事件触发的顺序,从最里面的标签逐步往外找!
	
四.动画
	1,显示,隐藏动画:
		a)对象名
			.show()显示
			.show(时间)动画效果,在规定时间内显示完毕
			.show("fast/normal/slow")
			.hide().hide(时间).hide("fast/normal/slow")
			
	2.淡入淡出
		对象
		.fadeOut()--淡出
		.fadeOut(参数)
		.fadeIn()--淡入
		.adeIn(参数)
		
	3.改变对象的高度
		对象
		.slideUp([可选参数])--缩小对象的高度
		.slideDown([可选参数])--变大对象的高度
		
	4.自定义动画
		a)开始动画
		对象
		.animate({left:"+=50px",top:"+=20p",width:"600px",.......},时间参数)
		注:里面参数的写法,并且还可以设置动画列队,只需要在.animate().animate().....
		动画在执行完毕后都会调用一个方法:回调函数!
		eg:
		对象.animate({XXXXX},600,funciton(){
			//写入回调函数的代码
		});
		
		b)停止动画
		对象名.stop();
		
		c)判断对象是否处于动画状态
		对象名.is(":animated"),注意animated前面有冒号,并且是过去式
		(记得在前面我讲过获取正在动画的对象 $("对象名:animated"))
		如果想正在执行动画的对象不再次执行动画,方法如下:
		if(!$("对象名").is(":animated")){
			//功能代码
		}
五:还没想到,把鼠标拖动组件的代码在默一遍(假设移动的组件ID为:moveMe):
	注意事项:要移动的组件的position一定要为absolute,并且有默认的top,left属性,并且该属性最好不是百分比!
	$(function(){
		//定义必需的变量
		var allowMove=false;
		var posX,posY;
		$("#moveMe").mousedown(function(e){
			allowMove=true;
			posX=e.pageX-parseInt($(this).css("left"));
			posY=e.pageY-parseInt($(this).css("top"));
		}).mouseup(function(){
			allowMove=false;
		});
		
		$(document).mousemove(function(e){
			if(allowMove){
				$("#moveMe").css({"top":e.pageY-posY,"left":e.pageX-posX});
			}
		});
	});
	//-----------------------------------------------------------
	哈哈~以上代码就大功告成了,我写了十几遍了~总算是能够流畅的默写出来了!
	
六,突然想到了今天上课讲到的如果避免动画重复的问题(JQuery Chapter3 HomeWork 的最后一题)!
	$(function(){
		var timeId=null;
		$("#images").mouseover(function(){
				timeId=setTimeout(function(){
					$("#showImage").show();
				},500);
		}).mouseleave(function(){
			//清楚计时器
			clearTimeout(timeId);
			$("#showImage").hide();
		}).mousemove(function(e){
			$("#showImage").css({"left":e.pageX+5,"top":e.pageY+5});
		});
	});
	//-----------------------------------------------------------
	这样写就避免了重复动画的效果了!
	
<!--
Author:Lovingshu's Forever
Date:2011-10-13 21:40
Remark:With JQuery We really write less but do more!!
-->