jquery_事件与动画

事件绑定

bind(type[,data],fn)(无限触发)

type:事件类型包括jquery中已有事件也可以自定义事件

data:可选参数,作为event.data属性传递给事件对象的额外数据对象

fn:是用来绑定的处理函数

one(type[,data],fn)(只触发一次)

合成事件

hover(enter,leave);用于模拟光标悬停事件

toggle(fn1,fn2,...fn);模拟鼠标连续单击事件

事件冒泡

如果内外元素绑定了同一事件,那么点击里面事件外面事件也会触发

解决方法:添加事件对(event)      event.stopPagation()停止事件冒泡

阻止默认行为 :

网页中的元素都有自己的默认行为 (单击超链接之后会跳转,表单的提交)

 event.preventDefault()   (return false)         阻止默认行为

事件对象属性:

event.type()获取到事件的类型

event.target()获取触发事件的元素

event.pageX()和event.pageY() 获取光标相对于页面的x坐标和y坐标

event.which()在鼠标单击事件中获取到鼠标的左,中,右键,在键盘事件中获取键盘的案件(1:鼠标左键:2鼠标中键:3鼠标右键)

event.metaKey()获取<ctrl>按键

event.originalEvent()指向原始的事件对象

移除事件:

unbind([type],[,data])

data:将要移除的函数

如果没有参数则删除所有绑定事件

模拟操作:

tigger(type[,data]) 可自定义也可以用jquery里本身的方法

动画

show()显示  可填参数

hide()隐藏  可填参数

fadeIn() fadeOut()改变元素的不透明度

slideUp() slideDown()改变元素高度 到0为止

slow :0.6秒

normal:0.4秒

fast:0.2秒

自定义动画

animate(params,speed,callback)

params:一个包含样式属性及值的映射

speed:速度,可选

callback:在动画完成时执行的参数 可选

累加 ,减: +=,-=

多重动画:后面在添加

animate({left:"500px"},3000).animate({height:"500px"},5000)

停止动画

stop([clearQueue][gotoEnd]):

clearQueue:是否清空未执行的动画队列

gotoEnd:是否直接将正在执行的动画跳转到末状态

直接调用stop()停止正在执行的动画

判断元素是否处于动画状态

$(element).is(":animated")

toggle()  切换元素可见状态

slideToggle() 高度

fadeTo(600,0.2) 透明度

动画队列

一组元素上的动画效果

当在以一个animate()方法中应用多个属性时,动画是同时发生的

链式,按顺序发生

多组元素上的动画效果

默认情况下,动画都是同时发生的

回调,按顺序