javascript - 如何在jQuery中实现 'rollout'的效果

Question

看看这个家伙的博客:

http://simplebits.com

当您将鼠标悬停在帖子左侧的“无限”符号上时，我真的很喜欢动画效果 - 它会为帖子推出一个缩短的 URL。我正在尝试弄清楚如何调整/模仿它(我想将电子邮件符号作为图像并在其悬停时推出我的电子邮件地址)。

我对 jQuery 比较陌生(我假设这个效果已经完成)。知道我该怎么做吗？

Answer 1

这是一个简单的例子:

jsFiddle link

我默认应用 0 宽度和悬停 width: auto 或者在我的例子中是 300px :p 不透明度，颜色可以通过将默认样式添加到低值并将悬停状态添加到最大来设置或更高 :p 反之亦然。

-webkit-transition: all .5s ease .05s;
-moz-transition: all .5s ease .05s;
-o-transition: all .5s ease .05s;
-ms-transition: all .5s ease .05s;
transition: all .5s ease .05s

玩得开心。