如何实现在jQuery的一个“推出”效果

Question

看看这个家伙的博客：

http://simplebits.com

我真的很喜欢，当你将鼠标放置在“无穷大”符号，以岗位左侧的动画效果 - 它卷删除该帖子的缩短网址。我试图弄清楚如何适应/模仿这个（我想将电子邮件符号作为图像并在其悬停时展开我的电子邮件地址）。

我比较新的jQuery（我假设这种效果已完成）。任何想法如何我可以去做这件事？

Answer 1

就像@AshentePaul说，你可以用CSS3 ... 做，但如果你真的想用jQuery做采取jQuery.fn.animate功能看看..

DEMO

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"); 
    } 
); 

Answer 2

这里有一个简单的例子：

jsFiddle link

我默认和悬停width: auto或在我的情况为300px适用0宽度：对不透明度，颜色可以仅仅通过添加默认样式为较低的值设置并将悬停状态设置为最大或更高：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 

玩得开心。