悬停效果社交网络图标

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