0

好的，所以我有一个图像可以在悬停时交叉淡入淡出到另一个图像。我还有描述性文本可以淡入淡出到与第二张图像对应的另一个文本。我现在所拥有的，有点糟糕，我唯一遇到的问题是它淡化为空白（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>

4

1 回答 1

0

你几乎拥有它。使过渡变得不可思议的第一件事是您调用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>

于 2015-07-25T02:09:52.623 回答