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/

我遇到的另一个问题是我在index.html页面上包含了代码，当它加载到www.marvinjobs.com/index.html时，只需打开www.marvinjobs.com

我希望有人可以帮我解决这两个问题！

Answer 1

好的，更新那样的脚本......

请参阅jsfiddle上的DEMO ... http://jsfiddle.net/4pcJ8/8/

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

JQUERY

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

在jQuery中动画社交图标

1 个答案:

JQUERY