事件编程和动画效果------05

目录

一. 事件编程

二. jQuery中的动画

---

一. 事件编程

jQuery对象.click(事件的处理程序);

jQuery对象.blur(事件的处理程序);

 

<1>.事件监听 主要处理兼容性问题,可以一个对象绑定多个事件,也可以直接移除事件

=> bind(type,[data],fn) ：为对象绑定事件监听程序

参数说明： type ：事件类型，不带’on’前缀，如click，mouseover

[data] ：可选参数，事件发生时所传递的数据（了解）

fn ：事件处理程序

eg: $('button').bind('click',function(){

alert('word');

}); //绑定单个事件

=> bind({type:fn,type:fn}) ：为对象绑定多个事件监听程序，要求参数为json对象

参数说明:

{

事件类型:事件的处理程序,事件类型:事件的处理程序

}

eg: $('button').bind({'click':function(){

alert('hello');

},'mouseover':function(){

console.log('word');

}}); // // 绑定多个事件

=> unbind([type]) ：事件移除

参数说明：

[type]：可选参数，要移除的事件类型，如果为空，则移除当前对象的所有事件

// eg: $('button').unbind('click'); //事件移除; 移除绑定的事件

 

*说明* : 我们可以通过bind方法为对象绑定多个事件处理程序，要求参数是一个

json对象且在jQuery的事件监听中，jQuery调整了所有内部的this指向，

使其内部this指向当前要操作的dom对象。

 

unbind方法主要用于移除事件，其不需要指定事件处理程序的名称，

只需要指定事件类型即可，不写默认移除所有事件。

 

二. jQuery中的动画

*基本

*滑动

*淡入淡出

<1> 基本效果 显示和隐藏.....渐进渐出

<a> show() ：显示

<b> show(speed,[callback]) ：以动画的效果显示

参数： speed ：动画持续的时间（默认的单位：毫秒）

[callback] ：可选参数，动画完成时所触发的回调函数

<c> hide() ：隐藏

<d> hide(speed,[callback]) ：以动画的效果隐藏

参数： speed ：动画持续的时间（默认的单位：毫秒）

[callback] ：可选参数，动画完成时所触发的回调函数

<c> toggle() ：切换显示与隐藏，如显示则隐藏，反之则显示

<d> toggle(switch) ：显示或隐藏 switch：true显示 switch：false隐藏

<e> toggle(speed,[callback]) ：以动画效果显示与隐藏

参数： speed ：动画持续的时间（默认的单位：毫秒）

[callback] ：可选参数，动画完成时所触发的回调函数

<f> speed:"slow", "normal", "fast" ： slow：缓慢 normal：正常 fast：快速

eg: 渐进渐出

$(function(){

$('button').click(function(){

$('div').toggle(2000);

});

/*

$('button').toggle(function(){

$('div').hide(2000,function(){

alert('我已经消失了');

});

},function(){

$('div').show(3000);

});*/

});

<div></div>

<button>点击</button>

<2> 滑动效果 上拉和下拉.....幕布式

<a> slideDown(speed,[callback]) ：以动画效果下拉显示

<b> slideUp(speed,[callback]) ：以动画效果上拉显示

<c> slideToggle(speed,[callback]) ：切换向上与向下效果

参数说明： speed：动画持续时间

[callback]：可选参数，动画完成时所触发的回调函数

eg: $(选择器).slideToggle(3000);

<3> 淡入淡出效果 ...透明度的问题 eeg02/g03.php

<a> fadeIn(speed,[callback]) ：以动画效果淡入

<b> fadeOut(speed,[callback]) ：以动画效果淡出

参数说明：

speed：动画持续时间

[callback]：动画完成时所触发的回调函数

<c> fadeTo(speed,opacity,[callback]) ：以动画效果设置元素透明度

参数说明：

speed：动画持续时间

opacity：从0（全透明）到1（不透明），（PS软件0-100%）

[callback]：动画完成时所触发的回调函数

<4> 自定义动画效果

=>当某一个效果通过一个操作无法完成时，就得借用自定义动画效果来完成了

=> animate(params,[speed],[easing],[fn])

参数说明:

params ：要求是一个json对象

speed ：动画的持续时间

easing ：动画效果

fn ：动画完成时所触发的回调函数