jQuery绑定事件及动画效果

jQuery绑定事件及动画效果

绑定事件

on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数。
bind(type,[data],fn)：为每个匹配元素的特定事件绑定事件处理函数。
one(type,[data],fn)：为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。

常见事件类型

  - blur		失去焦点
	focus		获得焦点
	resize		调整浏览器窗口的大小
	scroll		滚动指定的元素时
	unload		离开页面时
	click		点击
	dblclick	双击
	mousedown	鼠标按下
	mouseup	    鼠标弹起
	mousemove	鼠标移动
	mouseover	鼠标悬停
	mouseout	鼠标移走
	mouseenter	鼠标移入
	mouseleave	鼠标离开
	change		内容改变
	select		选中
	submit		提交
	keydown		键盘按下
	keypress	键盘按下
	keyup		键盘弹起
	error		有错误

Hover事件

 hover([over,]out)

光标移入，触发第一个事件，光标移走，触发第二个事件

	$("#id").hover(function(){
	 
	//光标移入
	 
	},function(){
	 
	//光标移出
	 
	})

获取事件针对的对象event.target
获取光标所在页面的位置event.pageX()/event.pageY()
阻止事件的冒泡event.stopPropagation()
阻止默认事件的发生event.preventDefault()

元素的显示隐藏

show([speed,[easing],[fn]])：显示隐藏的匹配元素。
hide([speed,[easing],[fn]])：隐藏显示的元素

	$("#id").show("slow"); //600ms 
	 
	$("#id").show("normal"); //400ms
	 
	$("#id").show("fast"); //200ms
	 
	$("#id").hide("slow"); //600ms 
	 
	$("#id").hide("normal"); //400ms
	 
	$("#id").hide("fast");//200ms
	 
	$("#id").show(1000);//1000ms

元素的淡入淡出

	$("#id").fadeIn();
	 
	$("#id").fadeOut();

元素滑动出现或隐藏

	$("#id").slideDown(); //显示
	 
	$("#id").slideUp(); //隐藏
	
	$("#id").slideToggle(); //显示/隐藏

自定义动画

animate(params,[speed],[easing],[fn])

	$(this).animate({"left":"500px"},3000);  //三秒内，位置改变到指定地方
	 
	$(this).animate({"left":"+=500px"},3000);  //三秒内，位置改变500px
	 
	$(this).animate({"left":"-=500px"},3000);  //三秒内，位置改变500px