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

Posted 2023-05-08

【中文标题】悬停（jQuery）上的动画过渡[关闭]

【英文标题】：Animate transitions on Hover (jQuery) [closed]

【发布时间】：2013-06-23 19:16:27

【问题描述】：

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

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

谢谢！

【问题讨论】：

这个问题似乎跑题了，因为它要求其他人为您编写代码。请自己尝试一下，然后再提出更具体的问题。

这可能是真的，但由于我对 javascript 的了解是空的（并且没有起点），我正在寻找一个可能已经有人实现的解决方案..

【参考方案1】：

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

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

http://codepen.io/anon/pen/jxlHm

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

【讨论】：

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

没问题！我还没到可以进一步研究它的地步，但很高兴你走在正确的道路上。

【参考方案2】：

你能看一下Jquery Animate方法吗，例如http://www.w3schools.com/jquery/jquery_animate.asp

【讨论】：

不是真的错，但不是真正的答案。我真的建议链接到 jquery 自己的文档而不是 w3schools。

你的意思是 jQuery.com 文档？

api.jquery.com/animate

我的想法，对于初学者来说 w3schools 的例子很好，ok