$(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 隐藏),悬停时我会在公共(public)空间内交替淡入淡出。
我正在应用此 jQuery 代码来淡出图像 - 并在悬停时淡出文本
但问题是文本 div 会粘住并且不会淡出 - 总是因为鼠标移动太快。
你知道在哪里可以解决这个问题吗?
我设置了在线测试:http://paragraphe.org/stickytext/test.html
感谢您的任何提示
最佳答案
如果你的 wrapper 上没有宽度和高度,你可能会得到一些奇怪的结果,因为一旦图像元素被删除,它就会缩小。要查看,请在包装器周围添加边框和固定高度/宽度。或者至少对图像和文本 div 使用相同的高度。
<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>
已编辑
删除了不适用于您想要完成的任务的代码示例。
关于jQuery悬停: fading in a hidden div while fading out the "default" one,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1170702/