悬停（jQuery）上的动画过渡[关闭]答案

【问题标题】：Animate transitions on Hover (jQuery) [closed]悬停（jQuery）上的动画过渡[关闭]
【发布时间】：2013-06-23 19:16:27
【问题描述】：

我是一个 jQuery 菜鸟，但我正在尝试弄清楚如何创建标题的动画过渡。

我找到了这个 CodePen (http://codepen.io/ansac/pen/BHtkE)，但这并不是我想要实现的。我的问题是如何让背景保持原样悬停，同时为中间出现的文本设置动画。我会对如何水平设置动画（使其来自左/右并停在给定位置（中心））或垂直（从顶部/底部）到中心的动画非常感兴趣。

谢谢！

【问题讨论】：

【解决方案1】：

我确实试图弄乱您附加的链接。 Animate 很可能会起作用，但是您必须弄乱您的 CSS 和位置设置才能找到正确的位置和调整（假设您的编码类似于此页面）。请在下方查看并确认这是否是您要查找的内容。

注意：在 CSS 中，我将 hovertext 的 text-align 更改为 LEFT 而不是 CENTER，并为 jQuery 添加了动画选项。

我和你在同一条船上，边学习 jQuery/javascript，但只是搜索一些好书/网站来帮助你。 jQuery 的网站是一个不错的开始，因为我开始寻找那里。

【讨论】：

嘿，这正是我想要的！我开始按照上面的建议深入研究 .animate() 函数，但到目前为止没有成功。非常感谢您的解决方案，但我仍然面临一个小问题 - 文本实际上需要半秒钟才能达到重点。这不是为淡入淡出设置的速度，很可能是文本到达图像本身开始的“0像素”边界所花费的时间。我已经对其进行了一些研究，并将左边距减少到最佳值（-80px）并将速度设置为 150 毫秒 - 我仍然可以注意到这个“暂停”。还是非常感谢！
没问题！我还没到可以进一步研究它的地步，但很高兴你走在正确的道路上。

【解决方案2】：

【讨论】：