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

Question

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

此外，它周围似乎有一些点可以触发该功能（四处移动您的指针）...这几乎就像发生了某种包装？

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

$(".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>

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

Crossfade Image with Text using jQuery on Hover

html

jquery

mouseover

hover

cross-fade