在jQuery中设置社交图标动画

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

请在此处查看我的代码：

我遇到的另一个问题是，我在index.html页面中包含了代码，虽然它加载在www.marvinjobs.com/index.html上，但在打开www.marvinjobs.com时它不起作用

---

我希望有人能帮我解决这两个问题

好的，像这样更新脚本

请参阅JSFIDLE上的演示

对于Q2：您是否正确地包含了jquery库

JQUERY

---

最好使用CSS转换来实现。更简单。@vsync我想他是在用jquery来支持IE吧！是的，我希望它能够跨浏览器兼容。此外，我现在正在学习jquery，所以我也只想测试一下它的工作原理！谢谢！我没有考虑到填充和边距都必须包括在内。谢谢。我确实正确地包含了jquery，出于一些奇怪的原因，问题2已经自行解决，现在也可以在没有/index的情况下工作。htmlI已经用上面的jquery代码构建了带有动画效果的浮动社交图标，工作正常，但不是rtl模式。请检查，这是url

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