如何實現在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 

玩得開心。