MyException - 我的异常网
当前位置:我的异常网» Web前端 » jQuery中的事件跟动画

jQuery中的事件跟动画

www.MyException.Cn  网友分享于:2013-02-20  浏览:1次
jQuery中的事件和动画

jQuery中的事件和动画

一、jQuery中的事件

1.1、事件绑定

bind()方法来对匹配的元素进行特定事件的绑定,方法调用格式:bind{type [,data], fn};

三个参数说明:

第一个参数是事件类型,包括:blurfocusloadresizescrollunloadclickdblclickmousedownmouseupmousemovemouseovermouseoutmouseentermouseleavechangeselectsubmitkeydownkeypresskeyuperror等或自定义名称。

第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定的处理函数。

示例0301

1.2、合成事件

jQuery有两个合成事件:hover()方法和toggle()方法

hover()方法:当鼠标移到元素上时,会触发指定的第一个函数;当鼠标移出元素时,会触发指定的第二个函数。

Toggle()方法:第一次单击元素,触发指定的第一函数,第二次单击触发第二个函数,依次触发直到最后一个,随后每次单击重复对这几个函数的轮番调用。

示例0302

1.3、冒泡事件

页面上有多个事件,也可以有多个元素响应同一个事件。

冒泡事件问题的解决方法,为函数添加一个参数event,通过event.stopPropagation()来停止事件冒泡。

示例0303

1.4、事件对象的属性

1)event.type:获取到事件的类型。

2)event.target:获取到触发事件的元素。

3)event.pageXevent.pageY:获取光标相对于页面的x光标和y光标。

4)event.which:在鼠标单击事件中获取鼠标的左、中、右键;在键盘事件中获取键盘的按键。

示例0304

1.5、移出事件

unbind():删除所有绑定的事件。

unbind(“click”):删除单击事件。

unbind(“click”,myFun):删除myFun事件。

示例0305

1.6、模拟操作

trigger()方法触发事件。如:

$(‘#btn’).trigger(“click”);

可简写为:

$(‘#btn’).click();

触发自定义事件:

$(‘#btn’).trigger(“MyClick”);

 

Trigger(type[,dta])方法有两个参数,第一个参数是触发的事件类型,第二个参数是要传递给事件处理函数的附加数据,以数组形式传递。

示例0306

二、动画

2.1show()方法和hide()方法

隐藏/显示元素是通过改变元素的display样式的值:noneblock/inline。如:

$(“element”).show()

可以为方法指定一个速度参数让元素动起来。如:

$(“element”).show(“slow”)$(“element”).show(1000)

示例0307

2.2fadeIn()方法和fadeOut()方法

只改变元素的不透明度,不改变其高速和宽度。

示例0308

2.3slideUp()方法和slideDown()方法

只改变元素的高度。

示例0309

2.4、自定义动画方法animate()

语法结构:animate(params, speed, callback);

Params:一个包含样式属性及值的映射,比如{property1:”value1”,property2:”value2”,…}

Speed:速度参数,可选

Callback:在动画完成时执行的函数,可选

示例0310

2.5、动画回调函数

示例0311

2.6、停止动画和判断是否处于动画状态

Stop([clearQueue][,gotoEnd]);两个参数都是可选Boolean值。

clearQueue指是否要清空未执行完的动画队列,

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

If(!$(element).is(“:animated”)){

                   //…

}

示例0312

2.7、其它动画方法

Toggle(speed,[callback])方法:切换元素的可见状态。

slideToggle(speed,[callback])方法:通过高度变化来切换元素的可见性。

fadeTo(speed,opacity,[callback])方法:把元素的不透明度以渐进方式调整到指定的值。

示例0313

2.8、动画方法总结

方法名

说明

Hide()show()

同时修改多个样式属性即高度、宽度和不透明度

fadeIn()fadeOut()

只改变不透明度

slideUp()slideDown()

只改变高度

fadeTo()

只改变不透明度

Toggle()

用来代替hide()方法和show方法,所以会同时修改多个样式属性即高度、宽度和不透明度

slideToggle()

用来代替slideUp方法和slideDown()方法,所以只能改变高度

Animate()

属于自定义动画的方法,以上各种方法实质内部都调用了animate()方法。

示例0314

 

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有