Question

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

这是标记：

<div id="wrap">

    <div class="image">
        <img src="http://domain.com/images/image.png">
    </div>

    <div class="text hide">
        <p>Text text text</p>
    </div>

</div>

我正在应用这个jQuery代码淡出图像 - 并在文本中淡入淡出：

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

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

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

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

感谢任何提示

Answer 1

尝试在您的悬停功能上使用 .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 2

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

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

EDITED

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

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队列是每个元素，所以我在这里要做的是在de image队列下启动文本效果。

让我再给你一个建议。如果您打算将此效果应用于各种图像，请使用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（as seen here），但没有任何改变。因此，看到所有常见的jQuery指令都没有响应，我已经检查了我的CSS。

有诀窍。

我有什么：

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

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

所以我改为：

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

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

然后，关于代码段，它也适用于 mouseenter / moseleave 和悬停：

<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

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

6 个答案: