jQuery隨機淡入淡出

Question

我對jQuery有一些淡入淡出的幫助，但它並不像我需要的那樣工作。這是腳本：

$(document).ready(function(){ 
    $("#trivlimp").hover(function(){ 
    $("#trivlimp").fadeToggle("slow"); 
    $("#imp").fadeToggle("slow"); 
    }); 
}); 

而不是僅僅顯示像我希望它的內容，它不斷淡入淡出，當我將鼠標懸停在「trivlimp」，而不是僅僅顯示「小鬼」的內容，然後褪色當我停止徘徊時。當您將鼠標懸停在左側的迷你配置文件上時，您可以看到我想要說的內容的示例。 http://trivli.b1.jcink.com/index.php?showtopic=2&st=0&#entry2

Answer 1

在容器中放置它們的bot將懸停效果放在容器上，然後顯示隱藏兒童。

樣品：http://jsfiddle.net/TX4g5/6/

代碼：JS

$(document).ready(function(){ 
    $("#wrapper").hover(function(){ 
    $("#wrapper p:first-child").fadeToggle("slow");  
$("#wrapper p:last-child").fadeToggle("slow"); 

    }); 
});​ 

HTML：

<div id="wrapper"> 
    <p>Normal visible</p> 
    <p style="display:none">Visble when hovered</p> 
</div>​ 

CSS：

/*CSS so both p elements are above each other*/ 
#wrapper { 
    position: relative; 
} 
#wrapper p{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 2

這實際上是正常行爲：

您使用懸停功能來隱藏#trivlimp。它會很好地淡化，但當它完全消失時，將鼠標懸停在「出」的位置，並且淡化效果會被切換爲淡出狀態。這一次它會淡入，因爲它淡入，你再次懸停的元素，它淡出，等等...

嘗試添加類顯示設置像隱藏，無，塊或內嵌時，德淡出已完成。

$("#trivlimp").fadeToggle("slow").addclass("hidden"); 
$("#imp").fadeToggle("slow").addclass("visible); 

個人而言，我不認爲這是最好的做法......我會建議使用鼠標懸停和鼠標進行切換效果和添加/刪除類自己。

$("#wrapper").mouseover(function() { 
    $("#trivlimp").fadeOut("slow"); 
    $("#imp").fadeIn("slow"); 
}).mouseout(function() { 
    $("#trivlimp").fadeIn("slow"); 
    $("#imp").fadeOut("slow"); 
}); 

這種方式，你有超過你在做什麼更多的控制（好吧，它需要更多一點的打字，但結果是最重要的......）

*編輯： 我對不起，我沒有想太直，你必須在它周圍添加一個包裝，因爲我寫的代碼會給出與你一樣的結果...