jQuery隨機懸停淡入淡出

Question

我在jQuery方面獲得了一些幫助，可以進行淡入淡出，但是它並不能完全滿足我的需要。 這是腳本：

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

當我將鼠標懸停在“ trivlimp”上時，它會不斷淡入和淡出，而不僅僅是顯示“ imp”的內容，然后在我停止懸停時會淡出。 當您將鼠標懸停在左側的微型個人資料上時，您會在這里看到我要說的示例。 http://trivli.b1.jcink.com/index.php?showtopic=2&st=0&#entry2

Answer 1

將它們放到容器內的機器人身上，將懸停效果放在容器上，然后顯示隱藏的孩子。

范例： 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);

我個人認為這不是最佳實踐……我建議您使用mouseOver和mouseout來切換效果並自己添加/刪除類。

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

這樣，您就可以更好地控制自己的工作（好吧，這需要更多的輸入，但是結果是最重要的...）

*編輯：對不起，我並不是想太直率，您必須在它周圍添加一個包裝器，因為我編寫的代碼將產生與您相同的結果...