JQ事件动画
最近在学习JQ动画，收集一些JQ动画的一些基础知识跟大家分享下！
加载DOM执行
$(document).ready(function(){})
简写：
$(function(){})
4.1.2 事件绑定
在文档加载完成后，为元素绑定事件
bind(type[,data],fn)
type: 事件类型： 包括blur,focus,click等
第2个可选参数 作为event.data属性传递给事件对象的额外数据对象
eg
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
第3个参数为绑定的处理函数
4.1.3 合成事件
hover(enter,leave) 用于模拟光标悬停的事件
当光标移动到元素上，触发第一个函数，移出触发第二个函数
$(function(){
$("#panel h5.head").hover(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide()});
});
hover() 替代了JQ中的 bind("mouseenter") 和 bind("mouseleave")
2 toggle() 方法
toggle(fn1,fn2,...fnN) 鼠标连续单击事件
$("#panel h5.head").toggle(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide();}
toggle() 切换元素的可见状态
4.1.4 事件冒泡
单击元素内部的click事件，外部层次的事件也执行
<span><div><body>
事件按照dom的层次结构向上直至顶端
事件对象:
$("element").bind("click",function(event){}//单击时，event事件对象被创建，该对象只有事件处理函数能访问，函数执行完毕，对象就被销毁。
停止冒泡事件 stopPropagation()
在处理函数内部末尾添加
event.stopPropagation(); // 停止事件冒泡
阻止元素默认行为 preventDefault()
eg: 阻止表单的提交
bind("click",function(event){event.preventDefault();//阻止默认行为})
stopPropagation() preventDefault() 都可以用return false;替换，return false 包括两个方面
事件捕获，反向冒泡
JQ 不支持，直接用javascript
4.1.5 事件对象的属性
(1) event.type() 获取到事件的类型
(2)event.stopPropagation()
(3)event.preventDefault()
(4)event.target()//获取到触发事件的元素
event.target.href//获取到href属性值
(5)event.relatedTarget()
mouseover 和mouseout 所发生的相关元素通过event.relatedTarget() 来访问
(6)event.PageX()和 event.PageY() 获得光标相对于页面的x坐标和y坐标
(7)event.which() 鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件获取键盘按键
e.which// 1 鼠标左键，2鼠标中建，3鼠标右键
(8) event.metaKey() //获取键盘事件的<crtl>按键
(9)event.originalEvent()方法 指向原始的事件对象
4.1.6 移除事件
unbind()
("#btn").unbind("click");
("#btn").unbind();
unbind([type][,data]);
第一个参数是事件类型，第二个参数是要移除的函数
如果没有参数，则移除所有绑定的函事件
提供了事件类型，只删除该类型的绑定事件
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数被删除.
One() 方法。为元素绑定事件，只执行一次，事件处理函数被触发后，则删除事件
使用方法跟 bind() 相同
4.1.7 模拟操作
模拟用户操作，来达到效果。例如在用户进入页面后，触发click事件
trigger()
$("#btn").trigger("click");
还能触发自定义事件
$("#btn").bind("myclick",function(){});
$("#btn").trigger("myclick");
传递数据
tigger(type[,data])
触发的事件类型；传递给事件处理函数的附加数据。以数组形式。
$("#btn").bind("myclick",function(event,message1,message2){$("#test").append("<p>"+message1+message2+"</p>")});
$("#btn").trigger("myclick",["我的自定义","事件 "]);
触发事件后还会执行浏览器的的默认操作。
若不执行默认操作则用 triggerHandler()
4.1.8 其他用法
1.绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");})
})
2. 添加事件命名空间，便于管理
$(function(){
$("div").bind("click.plugin",function(){});
$("div").bind("mouseover.plugin",function(){});
#("button").click(function(){$("div").unbind(".plugin")});// 通过命名空间来删除绑定的事件
});
3.相同事件名称，不同命名空间执行方法
$("div").bind("click.plugin",function(){});
$("div").bind("click",function(){});
#("button").click(function(){$("div").trigger("click!")}) //! 的作用是匹配所有不在命名空间里的事件
4.2 Jquery的动画
4.2.1 show()方法 和hide()方法
1. 隐藏和显示
$("element").hide() == element.css("display","none");
2.元素动态隐藏和显示
$("element").hide(1000) // 在1000毫秒内隐藏，即1秒
也可以用"slow" 600 "normal" 400 "fast" 200
4.2.2 fadeIn() fadeOut()
fadeOut() 在一段时间内降低元素的不透明度，直至元素完全消失
fadeIn() 相反
4.2.3 slideUp() 和slideDown()
slideDown() 讲display为none的元素从上向下延伸显示
4.2.4 自定义动画方法
animate()
要影响到元素的top left bottom ，right属性，必须先把元素的position设置为relative或者absolute。
$("#panel").click(function(){$(this).animate({left:"500px"},3000)});
2.累加累减动画
$(this).animate({left:"+=500px"},3000)
3.多重动画
$(this).animate({left:"+=500px",height:"300px"},3000)
4.按顺序执行多个动画
$(this).animate({left:"500px"},3000)；
$(this).animate({height:"500px"},3000) 动画的效果具有先后顺序，称为动画队列
4.2.5 动画回调函数
$(this).animate().animate({},3000,function(){$(this).css("border","5px solid blue")})通过动画回调函数将css方法添加到动画队列当中
回调函数适用于所有的动画效果
4.2.6 停止动画和判断是否处于动画状态
stop([clerrQueue][,gotoend]) boolean 值可选参数
第一个参数： 是否清空未执行完的动画队列
第二个参数： 是否直接将在执行的动画跳转到末状态
不带参数的stop 只会停止正在进行的动画
2，判断元素是否处于动画状态
if(!$( element).is(":animated"))
4.2.7 其他动画方法
toggle(speed,[callback]) 切换元素的可见状态
slideToggle(speed,[callback]) 通过高度变化切换元素的可见性
fadeTo(speed,opacity,[callback]) 元素的不透明度调整到指定的值
$(document).ready(function(){})
简写：
$(function(){})
4.1.2 事件绑定
在文档加载完成后，为元素绑定事件
bind(type[,data],fn)
type: 事件类型： 包括blur,focus,click等
第2个可选参数 作为event.data属性传递给事件对象的额外数据对象
eg
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
第3个参数为绑定的处理函数
4.1.3 合成事件
hover(enter,leave) 用于模拟光标悬停的事件
当光标移动到元素上，触发第一个函数，移出触发第二个函数
$(function(){
$("#panel h5.head").hover(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide()});
});
hover() 替代了JQ中的 bind("mouseenter") 和 bind("mouseleave")
2 toggle() 方法
toggle(fn1,fn2,...fnN) 鼠标连续单击事件
$("#panel h5.head").toggle(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide();}
toggle() 切换元素的可见状态
4.1.4 事件冒泡
单击元素内部的click事件，外部层次的事件也执行
<span><div><body>
事件按照dom的层次结构向上直至顶端
事件对象:
$("element").bind("click",function(event){}//单击时，event事件对象被创建，该对象只有事件处理函数能访问，函数执行完毕，对象就被销毁。
停止冒泡事件 stopPropagation()
在处理函数内部末尾添加
event.stopPropagation(); // 停止事件冒泡
阻止元素默认行为 preventDefault()
eg: 阻止表单的提交
bind("click",function(event){event.preventDefault();//阻止默认行为})
stopPropagation() preventDefault() 都可以用return false;替换，return false 包括两个方面
事件捕获，反向冒泡
JQ 不支持，直接用javascript
4.1.5 事件对象的属性
(1) event.type() 获取到事件的类型
(2)event.stopPropagation()
(3)event.preventDefault()
(4)event.target()//获取到触发事件的元素
event.target.href//获取到href属性值
(5)event.relatedTarget()
mouseover 和mouseout 所发生的相关元素通过event.relatedTarget() 来访问
(6)event.PageX()和 event.PageY() 获得光标相对于页面的x坐标和y坐标
(7)event.which() 鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件获取键盘按键
e.which// 1 鼠标左键，2鼠标中建，3鼠标右键
(8) event.metaKey() //获取键盘事件的<crtl>按键
(9)event.originalEvent()方法 指向原始的事件对象
4.1.6 移除事件
unbind()
("#btn").unbind("click");
("#btn").unbind();
unbind([type][,data]);
第一个参数是事件类型，第二个参数是要移除的函数
如果没有参数，则移除所有绑定的函事件
提供了事件类型，只删除该类型的绑定事件
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数被删除.
One() 方法。为元素绑定事件，只执行一次，事件处理函数被触发后，则删除事件
使用方法跟 bind() 相同
4.1.7 模拟操作
模拟用户操作，来达到效果。例如在用户进入页面后，触发click事件
trigger()
$("#btn").trigger("click");
还能触发自定义事件
$("#btn").bind("myclick",function(){});
$("#btn").trigger("myclick");
传递数据
tigger(type[,data])
触发的事件类型；传递给事件处理函数的附加数据。以数组形式。
$("#btn").bind("myclick",function(event,message1,message2){$("#test").append("<p>"+message1+message2+"</p>")});
$("#btn").trigger("myclick",["我的自定义","事件 "]);
触发事件后还会执行浏览器的的默认操作。
若不执行默认操作则用 triggerHandler()
4.1.8 其他用法
1.绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");})
})
2. 添加事件命名空间，便于管理
$(function(){
$("div").bind("click.plugin",function(){});
$("div").bind("mouseover.plugin",function(){});
#("button").click(function(){$("div").unbind(".plugin")});// 通过命名空间来删除绑定的事件
});
3.相同事件名称，不同命名空间执行方法
$("div").bind("click.plugin",function(){});
$("div").bind("click",function(){});
#("button").click(function(){$("div").trigger("click!")}) //! 的作用是匹配所有不在命名空间里的事件
4.2 Jquery的动画
4.2.1 show()方法 和hide()方法
1. 隐藏和显示
$("element").hide() == element.css("display","none");
2.元素动态隐藏和显示
$("element").hide(1000) // 在1000毫秒内隐藏，即1秒
也可以用"slow" 600 "normal" 400 "fast" 200
4.2.2 fadeIn() fadeOut()
fadeOut() 在一段时间内降低元素的不透明度，直至元素完全消失
fadeIn() 相反
4.2.3 slideUp() 和slideDown()
slideDown() 讲display为none的元素从上向下延伸显示
4.2.4 自定义动画方法
animate()
要影响到元素的top left bottom ，right属性，必须先把元素的position设置为relative或者absolute。
$("#panel").click(function(){$(this).animate({left:"500px"},3000)});
2.累加累减动画
$(this).animate({left:"+=500px"},3000)
3.多重动画
$(this).animate({left:"+=500px",height:"300px"},3000)
4.按顺序执行多个动画
$(this).animate({left:"500px"},3000)；
$(this).animate({height:"500px"},3000) 动画的效果具有先后顺序，称为动画队列
4.2.5 动画回调函数
$(this).animate().animate({},3000,function(){$(this).css("border","5px solid blue")})通过动画回调函数将css方法添加到动画队列当中
回调函数适用于所有的动画效果
4.2.6 停止动画和判断是否处于动画状态
stop([clerrQueue][,gotoend]) boolean 值可选参数
第一个参数： 是否清空未执行完的动画队列
第二个参数： 是否直接将在执行的动画跳转到末状态
不带参数的stop 只会停止正在进行的动画
2，判断元素是否处于动画状态
if(!$( element).is(":animated"))
4.2.7 其他动画方法
toggle(speed,[callback]) 切换元素的可见状态
slideToggle(speed,[callback]) 通过高度变化切换元素的可见性
fadeTo(speed,opacity,[callback]) 元素的不透明度调整到指定的值
