當你將鼠標懸停在一個框上時，淡入淡出的背景

我已經問過這個問題了。但現在我會嘗試更具體一些。當你將鼠標懸停在一個框上時，淡入淡出的背景

我試圖讓背景在您將鼠標移到一個框上時消失。我已經嘗試了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。我真的希望有人能幫助我！

來源

2012-05-10 Adnaves

'switchclass'是一個插件嗎？這聽起來像你需要在調用'animate（）'之前添加'stop（）'，假設你可以修改源代碼。 –

是的，SWichClass是jquery ui的一個插件。 – Adnaves

您也可以嘗試讓在標記/ 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/

來源

2012-05-10 11:51:48 VisioN

動畫不透明效果比fadeIn/fadeOut更好：http://jsfiddle.net/bRfMy/1/ – Hubro

@Codemonkey如果他們做同樣的事情會怎樣？ – VisioN

他們沒有。 fadeIn和fadeOut也控制顯示屬性。只要嘗試使用您的解決方案快速移動鼠標，然後嘗試我的 – Hubro

嘗試只有在該變量具有特定值時才添加變量以控制該效果的執行。當效果被執行時修改它的值。

事情是這樣的：

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; 
});

來源

2012-05-10 11:49:10 CoursesWeb

非常感謝您的回答.. 但是，如果我將鼠標懸停但速度非常快，仍然無法停止運行該動畫。 – Adnaves

當你將鼠標懸停在一個框上時，淡入淡出的背景

回答

相關問題