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