javascript - 如何在 jQuery 中实现“rollout”效果

Question

看看这个人的博客：

http://simplebits.com

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

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

Answer 1

这是一个简单的例子：

jsFiddle 链接

我在默认情况下应用了 0 宽度，在悬停时width: auto或在我的情况下为 300 像素：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

玩得开心。

Answer 2

就像@AshentePaul 说你可以用 CSS3 来做......但如果你真的想用 jQuery 来做，看看jQuery.fn.animate函数......

演示

var $col = $("#collapse"),
    $example = $("#example");

$example.hover(
    function(){
        $example.stop().animate({opacity: 1}, 400, "linear");
        $col.stop().animate({ width: "200px" }, 400, "linear");
    },
    function(){
        $example.stop().animate({ opacity: 0.3 }, 400, "linear");        
        $col.stop().animate({ width: "0" }, 400, "linear");
    }
);