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。它会很好地消失，但是当它完全消失时，你会“跳出”元素并且fadetoggle会再次切换为淡入淡出。这一次它会消失。因为它已经消失了，你再次将元素悬停在它上面，它会逐渐淡出等等......

尝试在淡入淡出完成时添加隐藏，无，阻止或内联等显示设置的类。

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

我个人认为这不是最佳做法...我建议使用mouseOver和mouse out切换效果并自行添加/删除类。

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

通过这种方式，您可以更好地控制自己正在做的事情（好吧，它需要更多的打字，但结果是最重要的......）

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

jQuery随机悬停淡入淡出

2 个答案: