jQuery社交吧

Question

我想用jQuery製作社交圖標吧。我第一次嘗試用CSS3，但我不喜歡動畫。我想淡入淡出效果，但我不知道如何用jQuery來完成。

 <div id="social"> 
      <ul> 
       <li><a class="twitter" href="#">Twitter</a></li> 
       <li><a id="deviantart" href="#">Deviantart</a></li> 
       <li><a id="dribbble" href="#">Dribbble</a></li> 
       <li><a id="info" href="#">Info</a></li> 
      </ul> 
     </div> 

a.twitter { 
    background: url(img/twitter.png) no-repeat; 
    width: 31px; 
    height: 31px; 
} 
a.twitter:hover { 
background-position: left bottom; 
} 

經過幾個小時的搜索和實驗沒有運氣，我終於轉過身來。 jsfiddle.net/CkUXB

Answer 1

這一切都在這裏解釋：

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/

Answer 2

我認爲這是你想要什麼：

Live demo

Answer 3

這裏是一個很酷的tut我剛剛發佈在GitHub上。它使用JQuery的.slideUp（）和.slideDown（）來顯示/隱藏社交欄。

https://github.com/YupItsZac/JQuery/tree/master/SocialDropBar

希望它能幫助！

注意：如果你想淡出，而不是幻燈片，只需更換.slideUp（）與.fadeout（）和.slideDown（）與.fadeIn（）