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