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);

                            });

                     }