jquery - 悬停效果社交网络图标

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