0

我得到了一些关于 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

4

2 回答 2

0

这实际上是正常行为：

您使用悬停功能隐藏#trivlimp。它很好地淡出，但是当它完全淡出时，您将鼠标悬停在“out”元素上，并且 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");
});

这样你就可以更好地控制你正在做的事情（好吧，它需要更多的打字，但结果是最重要的......）

*编辑：对不起，我没有想得太直，你必须在它周围添加一个包装器，因为我编写的代码将给出与你相同的结果......

于 2013-01-03T16:00:56.223 回答
0

将它们放入容器中，将悬停效果放在容器上，然后显示隐藏子项。

示例：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;
}

​</p>

于 2013-01-03T15:48:41.660 回答