JS_07-JQuery中的事件动画

JQuery中的事件

在jQuery中，事件总体分为两大类:基础事件和复合事件。 jQuey 中的简单事件，与JS 中的事件几乎一一样， 都含有鼠标事件. 键盘事件，载件事件等， 只是其对应的方法名称有略微不同复合事件则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序

7.1.1 基础事件

在JavaScript中，常用的基础事件有鼠标事件、键盘事件，window 事件，表单事件。事件绑定和处理函数的语法格式如下：

//语法：
事件名="函数名()";
或者，
DOM对象.事件名=函数;

载入事件

所谓载入事件，也就是window事件的一种，window事件表示当用户执行某些会影响浏览暴的操作时，而触发的事件。例如，打开网页时加载页面、关闭窗口、调节窗口大小.移动窗口等操作引发的事件处理。在jQuery中，常用的window事件有文档载入事件，它对应的方法是ready()。

鼠标事件

鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时而产生的事件

鼠标事件的区别：

键盘事件

浏览器事件

$(selector).resize();

7.1.2 绑定事件与移除事件

绑定事件

//绑定事件语法：
bind(type,[date],fn)

1）绑定单个事件

 $(document).ready(function(){
	$(".on").bind("mouseover",function(){
		$(".topDown").show();
	});
});

2）绑定多个事件

$(".top-m .on").bind({
	mouseover:function(){
		$(".topDown").show();
	},
	mouseout:function(){
		$(".topDown").hide();
	}
});

移除事件

//移除事件语法：
unbind([type],[fn])

7.1.3 复合事件

hover()方法

在jQuery中，hover( )方法用于模拟鼠标指针移入和移出事件。当鼠标指针移至元素上时，会触发指定的第一个函数(enter):
当鼠标指针移出这个元素时， 会触发指定的第二个函数(leave），该方法相当于mouseenter和mouseleave事件的组合。其语法格式如下。

hover(enter,leave);

toggle()方法

在jQuery中，toggle( )分为带参数的方法和不带参数的方法:带参
数的方法用于模拟连续单击，click事件。第一次单击元素，触发指定的第一个函数(fn1);当再次单击同一个元素时，则触发指定的第二个函数(fn2); 如果有更多函数.则依次触发，直到最后一 个。随后的每次单击都重复对这几个函数轮番调用，toggle() 方法的语法格式如下。

//带参方法：
togger(fn1,fn2,fn3.......fnN);
//不带参类似于show()和hide()方法的作用一样：
togger();

JQuery中的动画

控制元素的显示与隐藏

show() 控制元素的显示，hide( )控制元素的隐藏

改变元素透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

改变元素高度

slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏

//语法：
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])

自定义动画

//语法：
$(selector). animate({params},speed,callback)

• params: 必须，定义形成动画的CSS属性。
• speed:可选，规定效果时长，取值:毫秒、fast，slow。
• callback:可选，滑动完成后执行的函数名称。