javascript - 如何在悬停时为 div.card-img-overlay 中的文本添加动画效果

Question

我想使用卡片元素转发到博客文章。我的想法是在输入鼠标时永久显示标题和相应的描述。一旦鼠标离开该元素，描述就会再次消失。标题应移至原始位置。

为了说明我的想法，我创建了 this草图。

<小时/>

我目前的进展相对有限。我已经尝试过使用 fadeInUp 和 fadeOutDown (animate.css)。结果这有点令人不满意。您可以找到预览here 。 Here ，您可以找到没有动画的预览。

原则上，所需的动画已经就位。然而，标题最终并没有回到原来的位置，这当然是由于使用了fadeOutDown造成的。就我个人而言，当我想要实现相当简单的动画时，我对集成 Animate.css 感到不舒服。此时您能给我您的建议吗？

您如何评价我的进步？这是一个好的方法吗？

Answer 1

这是您的解决方案。 Fiddle只需添加

.removeClass().addClass("card-title fadeInDown down animated");

到

$(this).find('.card-title').removeClass().addClass('card-title
 fadeOutDown animated')

悬停回调中

用于集成 Animate.css 部分。您不必使用整个 css 文件，只需使用您需要的部分