悬停时使用jQuery交叉淡入淡出图像和文本

Question

好的所以我有一个图像可以在悬停时交叉淡入淡出到另一个图像。 我还有描述性文本可以淡入淡出到与第二张图像相对应的另一个文本。 我现在所拥有的，有点糟糕，我唯一遇到的问题是它淡化为空白（CSS：Display-none - 添加了第二张图像不会在第一张图像旁边弹出......我已经尝试摆弄位置，但到目前为止：没有骰子）

此外，它周围似乎有一些点会触发函数（移动你的指针）......几乎就像发生了某种包装一样？

总的来说，我已经尝试了显示和隐藏功能（与淡入/淡出相反），这并没有给我带来任何问题......但是，它并没有给我想要的效果。

$(".top").mouseenter(function() {
  $(".bottom").fadeIn();
  $(".top").hide();
});

$(".bottom").mouseleave(function() {
  $(".top").fadeIn();
  $(".bottom").hide();
});

.bottom {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="top" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG">
<img class="bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png">
<p class="top">Top Text</p>
<p class="bottom">Bottom Text</p>

Answer 1

你几乎拥有它。使过渡变得不可思议的第一件事是您调用hide() 而不是fadeOut()。正如您所提到的，您可能这样做是为了避免图像暂时堆叠在一起。在这种情况下，使用带有绝对定位的fadeOut() 是要走的路。请注意，我对标记进行了一些重组以使其正常工作：

$(".top").mouseenter(function() {
  $(".bottom").fadeIn();
  $(".top").fadeOut();
});

$(".bottom").mouseleave(function() {
  $(".top").fadeIn();
  $(".bottom").fadeOut();
});

.top, .bottom {
  position: absolute;
  top: 0;
  left: 0;
}

.bottom {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG">
  <p>Top Text</p>
</div>
<div class="bottom">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png">
  <p>Bottom Text</p>
</div>