2 

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

感谢任何提示

4

6 回答 6

3

尝试在悬停功能上使用.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>
于 2009-07-23T10:23:53.930 回答
3

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

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

已编辑

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

于 2009-07-23T11:25:33.853 回答
2

尝试使用队列：

<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();
            });
....

这样你只需要调用一次。

于 2009-07-23T11:32:22.873 回答
0

感谢所有的提示 ：

我尝试使用 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

于 2009-07-23T12:16:19.440 回答
0

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

于 2009-07-23T10:13:18.663 回答
0

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>
于 2009-07-23T10:15:00.143 回答