Javascript 替换图像时文本闪烁（css和jquery）

将鼠标悬停在图像上方时，文本在图像上方可见的过渡是平滑的，然后我将图像和文本放在一个分区中。我将图像和文本放在一个分区中，以便将文本放在图像上方。过渡现在不稳定了--你知道我如何解决这个问题吗？多谢各位

$（文档）.ready（函数（）{
$（“img”）.hover（函数（）{
$（“img”）.stop（）.animate({
“不透明度”：“0”
}“慢”）；
$（“.text”）.css（“可见性”、“可见”）；
},
函数（）{
$（“img”）.stop（）.animate({
“不透明度”：“1”
}“慢”）；
$（“.text”）.css（“可见性”、“隐藏”）；
});
});
#图像{
显示：块；
保证金：0自动；
身高：35%；
宽度：35%；
左：5%；
溢出：隐藏；
}
#图像块{
位置：相对位置；
溢出：隐藏；
}
.文本{
颜色：#000000；
文本对齐：居中；
字体系列：“雷威”；
字体大小：90%；
可见性：隐藏；
位置：绝对位置；
填充：3%；
宽度：100%；
底部：30px；
}

NBB4乙烯
将悬停事件绑定到
#imageblock
而不是图像：


$（文档）.ready（函数（）{
$（“#imageblock”）.hover（函数（）{
控制台日志（“输入”）；
$（“img”）.stop（）.animate（{“不透明”：“0”}，“慢”）；
$（“.text”）.css（“可见性”、“可见”）；
}，函数（）{
控制台日志（“离开”）；
$（“img”）.stop（）.animate（{“不透明”：“1”}，“慢”）；
$（“.text”）.css（“可见性”、“隐藏”）；
});
});
#图像{
显示：块；
保证金：0自动；
身高：35%；
宽度：35%；
左：5%；
溢出：隐藏；
}
#图像块{
位置：相对位置；
溢出：隐藏；
}
.文本{
颜色：#000000；
文本对齐：居中；
字体系列：“雷威”；
字体大小：90%；
可见性：隐藏；
位置：绝对位置；
填充：3%；
宽度：100%；
底部：0；
}

NBB4乙烯
您可以创建一个代码片段或JSFIDLE，而不是代码的屏幕截图吗？或者至少将HTML粘贴到问题中，以便我们可以复制。开始使用CSS转换。在我的Firefox上，只有当您将鼠标悬停在文本上时才会出错，这是意料之中的。当你把鼠标悬停在文本上时，你不是在图片上。尝试为文本和img注册事件。请看我的编辑建议好吗？它等待了这么久