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

这样，您就可以更好地控制自己的工作（好吧，这需要更多的输入，但是结果是最重要的...）

*编辑：对不起，我并不是想太直率，您必须在它周围添加一个包装器，因为我编写的代码将产生与您相同的结果...