悬停效果社交网络图标

Question

我无法在任何地方找到教程，显示如何在社交网络图标上创建像这样的悬停效果。这是一个例子。

http://demo.dotwired.de/walterwhite_html/

有人能指出我在正确的方向？我很想在我正在工作的网站上做同样的事情。

Answer 1

我想你会想使用一些jQuery的像

.mouseenter() http://api.jquery.com/mouseenter/

.mouseleave() http://api.jquery.com/mouseleave/

.slideUp() http://api.jquery.com/slideUp/

.slideDown() http://api.jquery.com/slideDown/

因此，基本上当鼠标进入时，您会向上滑动新图像，并且当鼠标离开时，会向下滑动旧图像。

编辑：

查看源，这里是他们做了什么。

$('footer .social li').hover(function() { 
     $(this).find('a').clone().addClass('hover').appendTo($(this)); 
     $(this).find('a:first-child').stop().animate({ marginTop: -25 }, 150); 
    }, function() { 
     $(this).find('a:first-child').stop().animate({ marginTop: 0, opacity: 0.99 }, 150); 
     setTimeout(function() { $(this).find('a.hover').remove(); }, 150); 
    });