MicroTut：jQuery 懸停方法

在構建導航菜單或任何其他 jQuery 腳本時，通常需要有一個可靠的方法來定義鼠標懸停和鼠標移出狀態。這是 hover() 方法來了。以下是它的使用方法：

$('.selectorClass').hover(
function(){
    $(this).stop().fadeTo('slow',0.4);
},
function(){
    $(this).stop().fadeTo('slow',1);
});

這將分配當鼠標移動到頁面上的元素上方時要執行的第一個函數，這些元素共享 selectorClass 類名，第二個在鼠標移開時執行。

您可以使用“這個” 在函數內部，訪問觸發事件的元素。

Hover 實際上將第一個函數綁定到 mouseenter 事件，第二個是 mouseleave ，所以你也可以這樣寫：

$('.selectorClass').mouseenter(function(){
    $(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
    $(this).stop().fadeTo('slow',1);
});

自 1.4 版 起 在 jQuery 中，現在可以將單個函數傳遞給懸停，該函數將在 mouseenter 和 mouseleave 上調用。這樣你就可以通過只寫一個函數來進一步縮短你的代碼：

$('.selectorClass').hover(function(){
    this.check = this.check || 1;
    $(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

上面的例子增加了 this.check 每次運行該函數時。根據數字是否偶數，它選擇不透明度級別傳遞給 fadeTo() （1 完全可見）。

這也是使用像 .slideToggle() 這樣的 jQuery 切換函數的好地方 和 .toggleClass() .