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

1. jQuery的事件处理

1.1 绑定事件处理函数

on()

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

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

参数	描述
event	必需。规定要从被选元素添加的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

one()

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

回忆事件绑定

鼠标事件	键盘事件	表单事件	页面事件
click	keydown	blur	load
dblclick	keypress	focus	unload(页面关闭)
mousedown	keyup	submit	resize
mouseup		change	scroll
mousemove		input
mouseover
mouseout
mouseenter(不支持冒泡)
mouseleave(不支持冒泡)

1.2 解绑事件处理函数

off()

移除事件处理函数。

1.3 触发事件

trigger( type)

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

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

1.4 鼠标事件

支持鼠标事件	事件语法
click	$(selector).click(function)
dblclick	$(selector).dblclick(function)
mousedown	$(selector).mousedown(function)
mouseup	$(selector).mouseup(function)
mousemove	$(selector).mousemove(function)
mouseover	$(selector).mouseover(function)
mouseout	$(selector).mouseout(function)
mouseenter(不支持冒泡)	$(selector).mouseenter(function)
mouseleave(不支持冒泡)	$(selector).mouseleave(function)
hover	$(selector).hover(inFunction, outFunction)

hover(inFunction, outFunction)

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

参数说明：

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

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

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

1.5 键盘事件

支持鼠标事件	事件语法
keydown	$(selector).keydown(function)
keypress	$(selector).keypress(function)
keyup	$(selector).keyup(function)

1.6 表单事件

支持表单事件	事件语法
focus	$(selector).focus(function)
blur	$(selector).blur(function)
change	$(selector).change(function)
submit	$(selector).submit(function)

注意:不支持input事件等

1.7 窗口事件

支持窗口事件	事件语法
load	$(selector).load(function)
unload	$(selector).unload(function)
resize	$(selector).resize(function)
scroll	$(selector).scroll(function)

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() ,再调用动画。