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

Question

我在任何地方都找不到说明如何在社交网络图标上创建像这样的悬停效果的教程。这是一个例子。

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

有人可以指出我正确的方向吗？我很想在我正在开发的网站上做同样的事情。

Answer 1

我想你会想使用一些像

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