JQuery动画与事件
本章目标
使用常用简单事件制作网页特效
使用鼠标事件制作主导航特效
使用hover( )方法制作下拉菜单特效
使用鼠标事件及动画制作页面特效
网页中的事件
和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现
jQuery中的事件
基础事件
鼠标事件
键盘事件
window事件
表单事件
复合事件
鼠标光标悬停
鼠标连续点击
鼠标事件
条件 描述 执行时机
click( ) 触发或将函数绑定到指定元素的click事件
mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时
mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时
mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入
mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件 鼠标指针离开时
示例：
//使用mouseover事件给导航项目改变背景颜色
$(".nav-ul a").mouseover(function() {
$(this).css("background-color","#f01e28");
})
//使用mouseout事件给导航项目还原背景颜色
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
})
鼠标事件方法的区别
方法 相同点 不同点
mouseover( )
mouseenter( ) 鼠标进入被选元素时会触发 鼠标在其被选元素的子元素上来回进入时：
触发mouseover( )
不触发mouseenter
mouseout( )
mouseleave( ) 鼠标离开被选元素时会触发 鼠标在其被选元素的子元素上来回离开时：
触发mouseout
不触发mouseleave
键盘事件
方法 描述 执行时机
keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时
keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时
keypress( ) 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时
示例：
$(document).ready(function () {
$("[type=password]").keydown(function(){
//append方法是在被选元素内部插入指定内容
$("#events").append("keydown")
}).keyup(function() {
$("#events").append("keyup")
}).keypress(function(){
$("#events").append("keypress")
})
$(document).keydown(function(event) {
console.log(event);
if(event.keyCode == 13) {
alert ("确认要提交吗？")
}
})
});
浏览器事件
语法：$(selector).resize( );
调整窗口大小时，完成页面特效
绑定事件与移除事件
绑定事件
bind(type,[data],fn);
type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[data]：可选函数
fn：处理函数
绑定单个/多个 事件
绑定单个事件
示例：
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});
绑定多个事件
示例：
$(".top-m .on").bind({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});
移除事件
语法：unbind([type],[fn])
[type]:事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[fn]:处理函数
提示：当unbind()不带参数时，表示移除所绑定的全部事件
复合事件
hover( )方法
toggle( )方法
hover( )方法
hover()方法相当于mouseover与mouseout事件的组合
语法：
hover(enter,leave);
示例：
.top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
toggle()方法
语法：
toggle(fn1,fn2,...,fnN);
示例：
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
toggle()方法2-2
oggle()方法不带参数，与show( )和hide( )方法作用一样
toggleClass( )可以对样式进行切换
语法：
toggleClass(className);
示例：
$("input").click(function(){$("p").toggleClass("red");})
小结：
toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换
jQuery动画效果
jQuery提供了很多动画效果
控制元素显示与隐藏
改变元素的透明度
改变元素高度
自定义动画
控制元素的显示及隐藏
语法：$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])、
speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback：可选.fadeIn函数执行完之后，要执行的函数。除非设置了speed参数，否则不能设置该参数
改变元素的透明度
语法：
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback：可选。show函数执行完之后，要执行的函数
改变元素的高度
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
语法:$(selector).slideUp ([speed],[callback])
` $(selector).slideDown ([speed],[callback])
示例：
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
自定义动画
语法:
$(selector). animate({params},speed,callback)
params:必须，定义形成动画的css属性
speed:可选,规定效果时长，取值：毫秒、fast、slow
callback:可选，滑动完成后执行的函数名称
