jQuery悬停: fading in a hidden div while fading out the "default" one

Question

$(function() {
  $('#wrap').hover(
    function() {
      $('#wrap .image').fadeOut(100, function() {
        $('#wrap .text').fadeIn(100);
      });
    },
    function() {
      $('#wrap .text').fadeOut(100, function() {
        $('#wrap .image').fadeIn(100);
      });
    }
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">
  <div class="image">
    <img src="http://example.com/images/image.png">
  </div>
  <div class="text hide">
    <p>Text text text</p>
  </div>
</div>

我有两个 div(其中一个用 CSS 隐藏)，悬停时我会在公共(public)空间内交替淡入淡出。

我正在应用此 jQuery 代码来淡出图像 - 并在悬停时淡出文本

但问题是文本 div 会粘住并且不会淡出 - 总是因为鼠标移动太快。

你知道在哪里可以解决这个问题吗？

我设置了在线测试:http://paragraphe.org/stickytext/test.html

感谢您的任何提示

Answer 1

如果你的 wrapper 上没有宽度和高度，你可能会得到一些奇怪的结果，因为一旦图像元素被删除，它就会缩小。要查看，请在包装器周围添加边框和固定高度/宽度。或者至少对图像和文本 div 使用相同的高度。

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

已编辑

删除了不适用于您想要完成的任务的代码示例。