jQuery悬停:在隐藏的div中淡出，而淡出"default"一 [英] jQuery hover : fading in a hidden div while fading out the "default" one

问题描述

我有两个div(其中一个隐藏在CSS中)，我在悬停时在一个公共空间内交替滚动淡入和淡出.

I have two divs (one of them hidden with CSS), which I'm fading in and out in alternance inside a common space, on hover.

这是标记:

<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代码来淡出图像-并在悬停时淡化文本:

And I was applying this jQuery code to fade out the image - and fading in the text, on 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>

但是问题是文本div变得发粘并且不会淡出-始终是鼠标移动得太快.

But the problem is that the text div gets sticky and won't fade out - always that the mouse movement is too quick.

您知道这在哪里可以解决吗?

Do you know where can it be the solution to this ?

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

感谢任何提示

推荐答案

如果包装器上没有宽度和高度，则一旦删除图像元素，包装器将收缩，可能会得到一些奇怪的结果.要查看，请在包装纸周围添加边框和固定的高度/宽度.或至少将相同的高度用于图像和文本div.

If your wrapper doesn't have a width AND height on it you may get some strange results as it shrinks once the image element is removed. To see, add a border and fixed height / width around the wrapper. Or at least use the same height for the image and text divs.

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

已编辑

删除了一个代码示例，该示例不适用于您要完成的任务.

Removed a code example that wasn't applicable to what you're trying to accomplish.

这篇关于jQuery悬停:在隐藏的div中淡出，而淡出"default"一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！