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

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(其中一个用CSS隐藏),我在悬停时在一个公共空间内交替淡入淡出。

This is the markup :

这是标记:

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

And I was applying this jQuery code to fade out the image - and fading in the text, on hover :

我正在应用这个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>

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

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

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

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

I set up an online test : http://paragraphe.org/stickytext/test.html

我建立了一个在线测试:http://paragraphe.org/stickytext/test.html

Thanks for any tip

谢谢你的提示

6 个解决方案

#1

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.

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

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

EDITED

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

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

#2

try using .stop() on your hover-out function, which will prevent the race-condition where you rapidly move your mouse over the divs

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

#3

Try using the queue:

尝试使用队列:

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

The jQuery queue is per element, so what I'm trying to do here is to launch the text effects under de image queue.

jQuery队列是每个元素,所以我在这里要做的是在de image队列下启动文本效果。

And let me give you another suggestion. If your intention is to apply this effect to various images use class instead of id.

让我再给你一个建议。如果您打算将此效果应用于各种图像,请使用class而不是id。

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

This way you only need to call this once.

这样你只需要调用一次。

#4

Your code never fades out the text div. Both functions of the hover event will fade out the image and fade in the text.

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

#5

You have the same code in both hover functions. Shouldn't you replace the selectors in second case?

两个悬停功能都有相同的代码。你不应该在第二种情况下更换选择器吗?

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

#6

thanks for all the tips :

感谢所有的提示 :

I tried to use the mouseenter / mouseleave events, since they seem to look in detail for the divs they are dealing with (as seen here), but nothing changed. So seeing that all the usual jQuery instructions weren't responding I've checked out as suggested my CSS.

我试图使用mouseenter / mouseleave事件,因为他们似乎仔细查看他们正在处理的div(如此处所示),但没有任何改变。因此,看到所有常见的jQuery指令都没有响应,我已经检查了我的CSS建议。

And there was the trick.

还有诀窍。

What I had :

我有什么:

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

was setting up a huge, empty space that the browser was interpreting as "not left still" by the cursor (I noticed that overflying that empty space was making the text to respond properly).

正在建立一个巨大的空白空间,浏览器正在通过光标解释为“没有静止不动”(我注意到飞越那个空白空间使文本正确响应)。

So I changed to that :

所以我改为:

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

Which lets the "p" tag alone, and positions the second block up in the div, but without a trace of empty space behind it.

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

Then, concerning the snippet, it will work as well with mouseenter / moseleave and hover :

然后,关于代码片段,它也可以与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>

This is the improved version http://paragraphe.org/nice/test.html

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

#1

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