当你将鼠标悬停在一个框上时，淡入淡出的背景

Question

我已经问过这个问题了。但现在我会尝试更具体一些。

我试图让背景在您将鼠标移到一个框上时消失。我已经尝试了2种不同的选择。

选项1： Box1是它的鼠标框，而hover1是新的背景，它实际上工作得很好。然而，它加载了咒语，意思是说，如果我用鼠标在框上疯狂发疯，即使当我的鼠标静止不动时，淡入淡出仍将持续不断。有没有办法阻止它？内容是当鼠标悬停时在内容框中更改的文本。这工作正常。

$("#box1").mouseover(function(){ 
    $("#background").switchClass("nohover", "hover1", 500); 
    $("#content").html(box1); 

}); 

$("#box1").mouseout(function(){ 
    $("#background").switchClass("hover1", "nohover", 150); 
    $("#content").html(content); 

}); 

选项2： 在这里，我添加类hover2，并要求它淡入淡出和。但这根本不起作用。有时甚至当我将鼠标移出盒子时，它甚至消除了侧面的一切。

$("#box2").mouseover(function(){ 
    $("#background").addClass("hover2").fadeIn("slow") 
    $("#content").html(box3); 
}); 

$("#box2").mouseout(function(){ 
    $("#background").removeClass("hover2").fadeOut("slow") 
    $("#content").html(content); 
}); 

我使用jquery ui。 我真的希望有人能帮助我！

Answer 1

您也可以尝试让在标记/ CSS小的变化。

HTML：

<div id="box"> 
    <div id="background"></div> 
    <div id="content"></div> 
</div> 

CSS：

#box { 
    position: relative; 
    /* ... */ 
} 
#background { 
    position: absolute; 
    display: none; 
    top: 0; 
    left: 0; 
    width: inherit; 
    height: inherit; 
    background-image: url(...); 
    z-index: -1; 
}​ 

的JavaScript：

$("#box").hover(function() { 
    $("#background").fadeIn(); 
}, function() { 
    $("#background").stop().fadeOut(); 
});​ 

DEMO：http://jsfiddle.net/bRfMy/

Answer 2

尝试只有在该变量具有特定值时才添加变量以控制该效果的执行。当效果被执行时修改它的值。

事情是这样的：

var goeft = 0; 
$("#box1").mouseover(function(){ 
    if(goeft == 0) { 
    $("#background").switchClass("nohover", "hover1", 500); 
    $("#content").html(box1); 
    goeft = 1; 
    } 
}); 

$("#box1").mouseout(function(){ 
    $("#background").switchClass("hover1", "nohover", 150); 
    $("#content").html(content); 
    // sets its value back to 0 if you want the next mouseover execute the effect again 
    goeft = 0; 
});