在hover图像缩放

我正试图在图像上hover缩放，我在谷歌找到了一些代码。 但它给了我不想要的结果。 图像缩放显示在窗口的角落。

我用的代码是

  $(function() { $('img').hover(function() { $(this).css({'z-index' : '10'}); $(this).animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '10px' }, 500); } , function() { $(this).css({'z-index' : '0'}); $(this).animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '70px', height: '70px', padding: '5px' }, 400); }); }); 

Answer 1

这应该为你做：

http://jsfiddle.net/uCtHh/1/

希望能帮助到你。

Answer 2

试试这个

  $(function() { $('img').hover(function() { $(this).css({'z-index' : '10'}); $(this).animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '10px', position: 'relative' }, 500); } , function() { $(this).css({'z-index' : '0'}); $(this).animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '70px', height: '70px', padding: '5px', position: 'static' }, 400); }); });