jquery - jQuery でのソーシャル アイコンのアニメーション化

Question

私はjQueryが初めてで、ユーザーがソーシャルアイコンにカーソルを合わせると、マウスが上にあるソーシャルアイコンが跳ね上がるアニメーションを作成したいと考えていました。

問題は、意図したとおりに機能するものの、マウスが置かれた場所でアイコンが上がらず、他のすべてのアイコンが移動することです。

ここに私のjQueryコードがあります:

$(document).ready(function () {
$('.social-icons img').hover(function () {
    // on mouse over, move up   
    $(this).stop().animate({
        marginBottom: '7px'
    }, 200);
},
// on mouse out, move back to original position
function () {
    $(this).stop().animate({
        marginBottom: '0px'
    }, 200);
});
});

ここで私のコードをチェックしてください: http://jsfiddle.net/marvinjobs/4pcJ8/7/

私が抱えているもう1つの問題は、 index.html ページにコードを含め、 www.marvinjobs.com/index.html にロードしている間、単に www.marvinjobs.com を開くと機能しないことです

誰かがこれら2つの問題で私を助けてくれることを願っています!