Javascript jQuery toggleClass动画问题

我有这一页：

如果您将鼠标悬停在左上角的徽标上，它应该会“褪色”同一徽标，并在其下方显示一些文字

问题是，徽标部分正在自然淡入，但它下面的文本看起来像是被放在一起，而不是“自然”淡入

---

有什么想法吗？

据我所见，你的文字写在图像上，鼠标上方的背景不同，我认为问题是由此造成的

您可以尝试执行以下操作：

<div class="sublogo-stress" style=" ">
    <img src="/wp-content/themes/SimplePress/images/trans_120x90.png">
    <span>test</span>
</div>

测试

甚至可以将span的不透明度设置为0，使其完全不可见。

---

淡入效果现在应该更好了。

toggleClass更改不透明度以匹配悬停类的不透明度，然后添加该类。但是，无论如何，更改类的点将表现为文本的突然出现。看这里

您可以通过淡入0来“绕过”此效果，在0中应切换类。或者，将带有文字的不可见层放置在原始图像上方，将其淡入不透明度，然后使用原始图像隐藏该层。处理没有透明度的图像会容易得多：）