jQuery悬停：淡入隐藏的div，同时淡出“默认”div 一

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 隐藏），它们在悬停时在公共空间内交替淡入和淡出。

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

但问题是文本 div 变得粘稠并且不会淡出 - 总是鼠标移动太快。

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

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

感谢您的任何提示

Answer 1

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

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

编辑

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

Answer 2

尝试在悬停功能上使用 .stop() ，这将防止您将鼠标快速移动到 div 上的竞争条件

<script type="text/javascript">
    $(function () {
        $('#wrap').hover(
            function () {
                $('#wrap .image').fadeOut(100, function () {
                    $('#wrap.text').fadeIn(100);
                });
            },
            function () {
                $('#wrap.text').stop().fadeOut(100, function () {
                    $('#wrap.image').stop().fadeIn(100);
                });
            }
        );
    });
</script>

Answer 3

尝试使用队列：

<script type="text/javascript">
$(function(){
    $('#wrap').hover(
        function(){
            $('#wrap .image').stop(true).fadeOut(100);
            $('#wrap .image').queue(function(){
                $('#wrap.text').fadeIn(100);
                $(this).dequeue();
            });
        },
        function(){
            $('#wrap .image').stop(true).queue(function(){
                $('#wrap.text').fadeOut(100);
                $(this).dequeue();
            });
            $('#wrap .image').fadeIn(100);
        }
    );
});
</script>

jQuery 队列是针对每个元素的，所以我在这里要做的是在图像队列下启动文本效果。

让我给你另一个建议。 如果您的目的是将这种效果应用于各种图像，请使用 class 而不是 id。

...
    $('.wrap').hover(
        function(){
            var wrap = this;
            $('.image', wrap).stop(true).fadeOut(100);
            $('.image', wrap).queue(function(){
                $('.text', wrap).fadeIn(100);
                $(this).dequeue();
            });
....

这样你只需要调用一次。

Answer 4

您的代码永远不会淡出文本 div。 悬停事件的两个功能都会淡出图像并淡入文本。

Answer 5

两个 hover 函数中的代码相同。 在第二种情况下你不应该更换选择器吗？

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').fadeOut(100, function(){
               $('#wrap.image').fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 6

感谢所有提示：

我尝试使用 mouseenter / mouseleave 事件，因为它们似乎详细查找它们正在处理的 div (如此处所示），但没有任何改变。 因此，看到所有常用的 jQuery 指令都没有响应，我已经按照 CSS 的建议进行了检查。

这就是窍门。

我所拥有的：

.text p{position:relative; top:-370px; padding: 0 10px}

正在设置一个巨大的空白空间，浏览器将其解释为光标“未保持静止”（我注意到飞越该空白空间使文本能够正确响应）。

所以我改为：

.text {margin-top:-370px; padding: 0 10px; float:left}

单独使用“p”标签，并将第二个块放置在 div 中，但后面没有任何空白空间。

然后，关于代码片段，它将与 mouseenter / moseleave 和 hover 一起使用：

<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        }
        );
$('#wrap').mouseleave(
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

这是改进的版本 http://paragraphe.org/nice/test.html