03- jQuery事件处理和动画效果

1. jQuery的事件处理

1.1 绑定事件处理函数

on()

将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素，如用脚本创建的新元素。

$(selector).on(event,childSelector,data,function)

one()

给元素注册只监听一次的事件处理函数。一旦事件处理函数执行后，就会自动删除。

回忆事件绑定

1.2 解绑事件处理函数

off()

移除事件处理函数。

1.3 触发事件

trigger( type)

type： 一个事件对象或者要触发的事件类型。

$("#btn").click(function(){alert("xxx");
}).trigger("click");

1.4 鼠标事件

hover(inFunction, outFunction)

功能描述：该事件是mouseenter()和mouseleave()方法的简写形式。

参数说明：

• inFunction: 表示鼠标刚进入元素边界时要执行的函数。

• outFunction: 表示鼠标刚离开元素边界时要执行的函数。

$("#box1").hover(function (event) {console.log(event.type+"我进了边界！");},function (event) {console.log(event.type+"我出了边界！");
});

1.5 键盘事件

1.6 表单事件

注意:不支持input事件等

1.7 窗口事件

2. jQuery的动画效果

2.1 显示与隐藏效果

show(speed, easing, callback)

功能描述：显示隐藏的匹配元素

参数说明：

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”(600)、“fast(200)”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

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

hide(speed, easing, callback)

功能描述：隐藏显示的元素

参数说明：

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

$("div").hide(3000, function(){alert("xxx");
});

toggle(speed, easing, callback)

功能描述：在被选元素上进行 hide() 和 show() 之间的切换。

参数说明：

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

$("div").toggle("slow", function() {console.log("切换完成");
});

2.2 淡入淡出效果

fadeIn(speed, easing, callback)

淡入

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeIn(3000);

fadeOut(speed, easing, callback)

淡出

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeOut(3000);

fadeTo(speed, opacity, easing, callback)

将被选元素的透明度逐渐地改变为指定的值

• speed: 必需。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• opacity: 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

$("div").fadeTo('slow', 0.5);

fadeToggle(speed, easing, callback)

功能描述：在fadeIn()和fadeOut()两个方法之间切换。 参数说明：

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

2.3 滑动效果

slideDown(speed, easing, callback)

向下展开动态显示元素。

参数说明：

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

slideUp(speed, easing, callback)

向上关闭隐藏元素。

参数说明：

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

slideToggle(speed, easing, callback)

功能描述：在关闭和展开之间切换。

参数说明：

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、“slow”、“fast”。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

2.4 自定义动画效果

animate(properties,speed, easing, callback)

• properties: 必须。设置相关动画需要的CSS的属性内容。

• speed: 可选。表示动画执行的时长，默认值是400毫秒。可选的值：以毫秒为单位的数值、 ("slow","normal", or "fast"。

• easing: 可选。指定动画在不同时刻的速度。默认值是"swing"。可选的值："swing"开始和结束比较慢，中间快；"linear"匀速运动。

• callback: 可选。表示动画执行完毕后的回调函数

$("div").animate({width : 100,height : 100,top : 500,left : 500},3000,function(){alert("xxx");
});

注意：有些CSS的属性不能使用

• backgroundColor

• borderColor

• color

• outlineColor

2.5 停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 停止动画排队的方法为：stop() ;

• stop() 方法用于停止动画或效果。

• stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

  总结: 每次使用动画之前，先调用 stop() ,再调用动画。