jQuery常会用到的切换事件和悬停事件

切换事件

jQuery定义了两个事件的切换方法：hover()和toggle()。事件切换在Web开发中经常会用到，如样式交互、行为交互等。

jQuery定义了一个toggleClass()方法，他能够显示/隐藏指定的样式类，实现样式的动态切换，而hover()和toggle()方法能够实现行为交互，toggle()方法用于绑定两个或多个事件处理器函数，以相应被选元素的轮流的click事件。

从jQuery 1.9版本开始，jQuery 删除了toggle(function, function, ..)用法，仅作为元素显隐切换的交互事件。如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。toggle([speed], [easing], [fn])默认是0毫秒，可选值如"slow”、参数speed为可选参数，表示隐藏/显示效果的速度，可用参数"normal"、"fast"。 参数easing也是可选参数，用来指定切换效果，默认是"swing大"linear"。参数fn也是可选参数，定义在动面完成时执行的函数，每个元素执行一次。

在下面代码中，使用按钮动态控制列表框的显示或隐藏。

控制按钮

    
空山新雨后，天气晚来秋。
    
明月松间照，清泉石上流。
    
竹喧归浣女，莲动下渔舟。
    
随意春芳歇，王孙自可留。
   

也可以直接为toggle()方法传递true或false参数，用于确定显示或隐藏元素。如下面的代码，当单机阿牛时，将段落文本隐藏，而不是切换效果。

$(function(){ 
    $("button").click(function(){
        $("ul#list").toggle(false);
    });
})

悬停事件

hover()方法可以模仿悬停事件，其用法也非常的简单，它包含两个参数，第一个参数表示鼠标移动到元素上时所触发的函数，第二个参数表示鼠标指针移除元素后要触发的函数。