jQuery04-事件-动画

案例1：绑定事件的两种方式

$(function(){
//			1.通过两种方式给div添加鼠标点击事件.
			// $("#da").click(function(){
			// 	console.info("ok");
			// })
			// $("#da").on("click",function(){
			// 	console.info("sad")
			// })
//			2.通过两种方式给div添加鼠标进入事件.
			// $("#da").mouseenter(function(){
			// 	console.info("ok")
			// })
// 			$("#da").bind("mouseenter",function(){
// 				console.info("sad")
// 			})
// //			3.通过两种方式给div添加鼠标离开事件.
// 			$("#da").mouseleave(function(){
// 				console.info("ok");
// 			})
// 			$("#da").on("mouseleave",function(){
// 				console.info("ok")
// 			})
// 		})

案例2：合成事件（事件切换）

$(function(){
			// 1.hover:鼠标悬停合成事件
//				1.1给div添加鼠标悬停合成事件:打印内容
				// $("#da").hover(function(){
				// 	console.info("123");
				// },function(){
				// 	console.info("qwe");
				// })
//				1.2给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
				// $("#ia").hide();
				// $("#da").hover(function(){
				// 	$("#ia").show();
				// },function(){
				// 	$("#ia").hide();
				// })
// 			2. toggle：鼠标点击合成事件.
//				2.1给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
			// $("#da").toggle(function(){
			// 	$("#ia").show();
			// },function(){
			// 	$("#ia").hide();
			// })
		})

案例3：事件传播(事件冒泡)

$(function(){
//			1.给span添加鼠标点击事件.
			$("#sa").click(function(){
				console.info("asd");
//			4.点击span，事件传播截止到span.
				return false;
			})
//			2.给div添加鼠标点击事件.
			$("#da").click(function(){
				console.info("qwe");
//			5.点击span，事件传播截止到div.
				return false;
			})
//			3.给body添加鼠标点击事件.
			$("body").click(function(){
				console.info("poi")
			})

案例4：移除事件

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

案例5：动画-基本动画

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

案例6：动画-滑动动画

$(function(){
//				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)
				})
		})

案例7：动画-淡入淡出动画

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

案例8：动画-自定义动画

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