JQuery事件，动画

绑定事件的三种方式

//			1.通过两种方式给div添加鼠标点击事件.
			// 方式一
			$("#da").click(function(){
				console.info("div被点击了！");
 			})
			// 方式二
 			$("#da").on("click",function(){
 				console.info("div被点击了！");
			})
			// 方式三
 			$("#da").bind("click",function(){
 				console.info("div被点击了！");
 			})
//			2.通过两种方式给div添加鼠标进入事件.
			$("#da").mouseenter(function(){
			console.info("鼠标进来了！");
 			})
 			$("#da").mousemove(function(){
				console.info("鼠标进来了！");
 			})
			$("#da").on("mouseenter"function(){
				console.info("div被点击了！");
			})
//			3.通过两种方式给div添加鼠标离开事件.
			$("#da").bind("mouseleave",function(){
				console.info("鼠标出去了！")
			})

合成事件

//js方式
			var ia = document.getElementById("ia");
			ia.style.display="none";
			$(function(){
				
		
//			1.hover:鼠标悬停合成事件
//				1.1给div添加鼠标悬停合成事件:打印内容.,
				$("#da").hover(function(){
					console.info("鼠标悬停合成事件鼠标进来")
				},function(){
					console.info("鼠标悬停合成事件鼠标出去")
				})
			
//				1.2给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
				$("#da").hover(function(){
					$("#da").show();
				},function(){
					$("#ia").hide();
				})
// 			2. toggle：鼠标点击合成事件.
//				2.1给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
				$("#da").toggle(function(){
				$("#ia").show();
				},function(){
				$("#ia").hide();
			})
		})

事件传播

//			1.给span添加鼠标点击事件.
			$("#sa").click(function(){
				console.info("span被点击了！")
			})
//			2.给div添加鼠标点击事件.
			$("#da").click(function(){
				console.info("div被点击了！")
				return false;
			})
//			3.给body添加鼠标点击事件.
			$("#body").click(function(){
				console.info("body被点击了！")
			})

移除事件

			$(function(){
//			1.给按钮添加鼠标点击事件，且只能点击一次。 
// 			$("#sb").click(function(){
// 				console.info("按钮被点击了！");
// 				$("#sb").unbind("click");
// 				$("#sb").off("click");
// 			})
// 			2.给i按钮添加鼠标点击事件,且只能偶数次点击才有效,奇数次则失效.
// 				var i = 1;
// 				$("#sb").click(function(){
// 					if(i % 2 == 0){
// 						console.info("按钮被点击了！")
// 					}
// 					i++;
// 				})
// 				$("#sb").toggle(function(){
// 					
// 				},function(){
// 					console.info("按钮被点击了！")
// 				})
// 			3.给按钮添加鼠标点击事件，且只能点击一次,通过函数one来完成.
			$("#sb").one("clikc",function(){
				console.info("按钮被点击了！")
			})
		})

基本动画

//			1.给隐藏按钮添加事件：使div在规定的时间内消失。
			$("#hide").click(function(){
				$("#ia").hide(1000);
			})
//			2.给显示按钮添加事件：使div在规定的时间内显示。
			$("#show").click(function(){
				$("#ia").hide(1000);
			})
//			3.给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。
			$("#toggle").toggle(function(){
				$("#ia").hide(1000);
			},function(){
				$("#ia").show(1000);
			})

滑动动画

//				1.给显示按钮添加鼠标点击事件：使div在指定时间内向下显示.
				$("#show").click(function(){
					$("#da").slideDown(1000);
				})
//				2.给隐藏按钮添加鼠标点击事件：使div在指定时间内向下隐藏.
				$("#hide").click(function(){
					$("#da").slideUp(1000);
				})
//				3.给显示/隐藏按钮添加鼠标点击事件：使div在指定时间内向下显示和向下隐藏.
				$("#toggle").toggle(function(){
					$("#da").slideUp(1000);
				},function(){
					$("#da").slideDown(1000);
				})
		})

淡入淡出动画

$(function(){})
				// 显示(淡入)
				$("#show").click(function(){
					$("#da").fadeIn(2000);
				})
				// 隐藏(淡出)
				$("#hide").click(function(){
					$("#da").fadeOut(2000);
				})
				// 显示/隐藏
				$("#toggle").toggle(function(){
					$("#da").fadeOut(2000);
				},function(){
					$("#da").fadeIn(2000);
				})
				})

自定义动画

			$(function(){
				// 放大
				$("#big").click(function(){
					$("#da").animate({
						width:450,
						height:450
					},1000)
				})
				$("#small").click(function(){
					$("#da").animate({
						width:300,
						height:300
					},2000)
				})
				// 缩小
				$("#small").click(function(){
					$("#da").animate({
						width:100+"px",
						height:+100+"px"
					},1000;
				})
				// 往右移动
				$("#right").click(function(){
					$("#da").animate({
						// left:300+"px"
						left:'+=100'
					},1000;
				})
				// 往左移动
				$("#left").click(function(){
					$("#da").animate({
						// left:100+"px"
						left:'-=100'
					},1000;
				})
				// 往下移动
				$("#down").click(function(){
					$("#da").animate({
						left:100+"px"
					},1000;
				})
				// 往上移动
				$("#up").click(function(){
					$("#da").animate({
						top:100+"px"
					},1000;
				})
				// 斜下右移动
				$("#xxy").click(function(){
					$("#da").animate({
						top:100+"px"
						left:100+"px"
					},1000;
				})
				// 斜上左移动
				$("#xsz").click(function(){
					$("#da").animate({
						top:100+"px"
						left:100+"px"
					},1000;
				})
			});