2012-07-07 40 views
1

我jQuery代碼:jQuery的刪除/添加類只有一次

$(document).ready(function() { 
    $("#adminbar").mouseover(function() { 
     $(this).addClass("adm_bar").slideDown("slow"); 
    }); 
    $("#adminbar").mouseout(function() { 
     $(this).removeClass("adm_bar").slideUp("slow"); 
    }); 
}); 

但是當你徘徊與#adminbar的股利,它只會增加/刪除一次的類,如果你試着做一遍,它不會工作。我希望你能夠隨意多次盤旋它。
什麼錯?

編輯:其在頁面的頂部,My website(under construction)

回答

2

看起來當您使用效果基本show,jQuery將自動設置顯示爲無,那麼「存在」你不能懸停也不至於一個元素 - 這是仍然存在,但不是「hoverable」。

在slideUp之後嘗試添加一個顯示:「block」屬性和visibility:「hidden」。

您應該可以將鼠標懸停在該元素上。

+1

+1這就是問題所在。如果它是隱形的,你怎麼能徘徊? – Engineer 2012-07-07 14:11:17

+0

謝謝,它現在工作:) – finst33 2012-07-07 14:11:52

1

您可以使用jQuery .hover()嘗試:

$("#adminbar").hover(function() { 
    $(this).addClass("adm_bar").slideDown("slow", function() { 
    $(this).css({ 
     visibility : 'visible', 
     display: 'block' 
    }) 
    }); 
}, 
function() { 
    $(this).removeClass("adm_bar").slideUp("slow", function() { 
    $(this).css({ 
     visibility : 'hidden', 
     display: 'block' 
    }) 
    }); 

您需要visibility: hidden/visible動畫完成後。因爲在動畫之後隱藏它使用display: none作爲結果它不能捕獲下一個懸停事件。所以你的代碼也在工作。

+1

這是一個offtop。從問題文本 - 「添加/刪除類一次,如果你嘗試再次這樣做,它不會工作」..你的代碼將如何解決這個問題? – Engineer 2012-07-07 14:03:21

0

使用.hover()函數。

$("#adminbar").hover(function() { 
    $(this).addClass("adm_bar").slideDown("slow"); 
}, 
function() { 
    $(this).removeClass("adm_bar").slideUp("slow"); 
});