jquery 只删除/添加一次类答案

【问题标题】：jquery removes/adds class only oncejquery 只删除/添加一次类
【发布时间】：2012-07-07 14:00:07
【问题描述】：

我的 jquery 代码：

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

但是当你用#adminbar 悬停 div 时，它只会添加/删除一次类，如果你再次尝试这样做，它将无法工作。我希望您能够将其悬停多次。
怎么了？

编辑：它在页面顶部，My website(under construction)

【问题讨论】：

标签： jquery hover mouseover

【解决方案1】：

看起来当您使用 slideUp 时，jQuery 会自动将显示设置为无，因此您不能悬停不“存在”的元素 - 它仍然存在但不能“悬停”。

在 slideUp 之后尝试添加一个 display : "block" 属性和 visibility: "hidden"。

您应该能够以这种方式悬停元素。

【讨论】：

【解决方案2】：

你可以试试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，因此它无法捕获下一个悬停事件。所以你的代码也可以工作。

【讨论】：

这是一个机顶盒。来自问题文本 - “添加/删除一次类，如果您再次尝试这样做，它将无法工作”..您的代码将如何解决这个问题？

【解决方案3】：

使用.hover() 函数。

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

【讨论】：