JavaScript第二十二天 jQuery中的事件和动画

jQuery中的事件

事件对象的属性

事件绑定on()

jQuery对象.on(事件名,函数)
函数中的this是触发这个事件的对象，且是原生的DOM对象。

绑定自定义事件，自定义事件需要用trigger来触发

取消事件绑定off

jQuery对象.off( ’ 事件名 ’ ,selector,fun)
如果没有参数,则取消这个元素所绑定的所有事件名。

事件绑定one()

one()绑定的事件只执行一次。
jQuery对象.one(事件名,函数)

合成事件hover()

jQuery对象.hover(滑上执行的函数，滑离执行的函数)

jQuery中的动画

show(),hide(),toggle()

jQuery对象.show(speed,easing,callback); //显示
jQuery对象.hide(speed,easing,callback); //隐藏
jQuery对象.toggle(speed,easing,callback); //开关效果
speed：运动时间，即多久显示或者隐藏，没有参数默认为0；
easing：规定在动画不同点上元素的速度。 swing–开头结尾移动慢，中间块，默认的。 linear：匀速。
callback：可选，回调函数。

透明度的改变

jQuery对象.fadeIn(speed,callback) 显示
jQuery对象.fadeOut(speed,callback) 隐藏
jQuery对象.fadeTo(speed,透明度，callback) 透明度到多少
jQuery对象.fadeToggle(speed,callback) 开关效果

高度的改变

jQuery对象.slideDown(speed,callback);显示
jQuery对象.slideUp(speed,callback);隐藏
jQuery对象.slideToggle(speed,callback);开关效果

自定义动画方法animate()

jQuery对象.animate({动画参数},时间,运动形式,回调函数)
动画参数：运动的属性和值
时间：运动快慢，默认400；
运动形式：默认swing 慢快慢 linear匀速
queue() 指示是否在效果队列中放置动画。 为false，动画将立即开始。
也可以直接在queue()直接添加函数最后加上 next()
next() 保证在执行完这次队列后再次执行下一个动画函数，如果没有则不执行下面的动画

判断是否处于动画状态

if(!$(element).is(’:animated’)){ //判断元素是否正处于动画状态
//如果没有进行动画，则添加新动画
}

延迟动画

jQuery对象.delay（时间）

停止元素的动画

jQuery对象.stop(clearQueue,gotoEnd)
clearQueue:代表是否要清空未执行完的动画队列。默认：false
gotoEnd:代表是否直接将正在执行的动画跳转到末状态。默认：false

stop(true) 停止当前的，同时阻止后续的
stop(true,true)当前动画到完成状态，停止后续动画

jQuery对象.finish();
所有运动立即到终点