jQuery中的事件与动画

一，jQuery事件

jQuery事件是对JavaScript事件的封装

1）基础事件

1.鼠标事件

2.键盘事件

3.window事件

 $(selector).resize( );

4.表单事件

5.绑定与移除事件

bind(type,[data],fn);        type:事件类型，包括click,mouseover,mouseout

[data]:可选函数        fn:处理函数

多选绑定事件

$(".top-m .on").bind({

    mouseover:function(){       

         $(".topDown").show();     

},     

        mouseout:function(){       

                  $(".topDown").hide();   

 } });       

移除事件

unbind([type],[fn])

当unbind()不带参数时，表示移除所绑定的全部事件

2）复合事件

1.hover()方法：hover()方法相当于mouseover与mouseout事件的组合

$(".top-m .on").hover(function(){

    $(".topDown").show();        //光标移入时

}, function(){   

           $(".topDown").hide();    //光标移出时

 } );

toggle()方法：toggle()方法用于模拟鼠标连续click事件

$("input").toggle(  

      function(){$("body").css("background","#ff0000");},    

     function(){$("body").css("background","#00ff00");},

     function(){$("body").css("background","#0000ff");}     )

toggle()方法不带参数，与show( )和hide( )方法作用一样

toggleClass( )可以对样式进行切换

toggle( )和toggleClass( )总结

toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件

toggle( )实现事件触发对象在显示和隐藏状态之间切换

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

二，JQuery动画效果

1）控制元素的显示和隐藏

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

2）改变元素的透明度

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

$(selector).fadeIn([speed],[callback])

$(selector).fadeOut([speed],[callback])

3）改变元素的高度

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

$(document).ready(function() {  

             $("h2").click(function(){     

                 $(".txt").slideUp("slow");   

                $(".txt").slideDown("slow");    

           });

 });