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

问题描述

$(function() {$('#wrap').hover(功能() {$('#wrap .image').fadeOut(100, function() {$('#wrap .text').fadeIn(100);});},功能() {$('#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="包裹"><div class="图像"><img src="http://example.com/images/image.png">

<div class="文本隐藏"><p>文本文本文本</p>

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

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

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

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

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

感谢您的提示

解决方案

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