悬停时如何在 div.card-img-overlay 中为文本设置动画答案

【问题标题】：How to animate text within div.card-img-overlay when hovering悬停时如何在 div.card-img-overlay 中为文本设置动画
【发布时间】：2018-06-29 08:06:43
【问题描述】：

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

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

我目前的进步相对较小。我已经尝试过同时使用fadeInUp 和fadeOutDown (animate.css)。事实证明，这有点不令人满意。您可以找到预览here。 Here，你可以找到没有动画的预览。

原则上，所需的动画已经到位。但是，标题并没有在原来的位置结束，这当然是使用fadeOutDown 造成的。就个人而言，当我想实现一个相当简单的动画时，我觉得集成 Animate.css 并不方便。你能在这一点上给我你的建议吗？

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

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

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

到

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

悬停回调中

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

【讨论】：