jquery中的事件和动画

1、jQuery中的事件

(1)绑定事件 bind()

$(".head").bind("click",function(){

$("div.content").hide("slow");

}).bind("click",function(){

$("div.content").show("slow");

});

(2)合成事件

① hover()
光标移入时触发第一个函数;光标移出时触发第二个函数

$("h5.head").hover(function(){

$("div.content").hide();

},function(){

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

});

② toggle()
第一次单击触发第一个函数,再次单击触发第二个函数

$("h5.head").toggle(function(){

$("div.content").hide();

},function(){

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

});

（3）事件对象的属性

①event.type()
事件类型

$("h5.head").click(function(e){

alert(e.type);

});

②event.pageX() event.pageY()鼠标的X轴
Y轴

$("h5.head").click(function(e){

$("#cord").html("X:"+e.pageX+"Y:"+e.pageY);

});

③event.which()
鼠标单击事件中获得鼠标的左中右键
键盘事件中获得键盘的按键

$("h5.head").mousedown(function(e){

alert(e.which);

});

$("body").keydown(function(e){

alert(e.which);

});

（4）事件模拟操作 trigger()

①常用模拟操作 trigger()

$("h5.head").trigger("click");

②触发自定义事件

$("h5.head").bind("myClick",function(){

$("div.content").hide(5000);

});

$("h5.head").trigger("myClick");

③传递数据
参数1,触发的事件类型;
参数2,传递给事件处理函数的附加数据

$("h5.head").bind("myClick",function(event,mes1,mes2,mes3){

alert(mes1+mes2+mes3);

$("div.content").hide(5000);

});

//附加数据的格式是一个数组的形式[]

$("h5.head").trigger("myClick",['name','age','gender']);

2、jQuery中的动画

（1）show()
和 hide()

$("h5.head").toggle(function(){

$("div.content").hide(5000);

},function(){

$("div.content").show("fast");

});

（2）fadeIn()fadeOut()

$("h5.head").toggle(function(){

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

},function(){

$("div.content").fadeOut("fast");

});

（3）slideUp()
和 slideDown()

$("h5.head").hover(function(){

$("div.content").slideUp("slow");

},function(){

$("div.content").slideDown(3000);

});

(4)自定义动画：animate()

$("div.content")

.animate({width:500,left:"+=100px",opacity:0.3},3000,function(){

$(this).toggle();

})

.css("background","red")

.click(function(){

$(this).fadeOut();

});

注意：

①动画都有速度参数 fast slow normal
自定义

②都有回调函数callback

③animate(params,speed,callback)需要相对定位

(5)停止动画 stop()

$("h5.head").hover(function(){

$(this).addClass("high");

$(this).next().show(2000);

},function(){

$(this).removeClass("high");

$(this).next().stop().hide();

});

(6)判断是否处于动画状态is(":animated")

if(!$("h5.head").is(":animated")){

$("h5.head").hover(function(){

$("div.content").show(5000);

},function(){

$(this).next().stop().hide(3000);

});

}