jquery - jQuery 图像动画

Question

当鼠标悬停时，我有一排图像动画 trought jQuery（缩放效果），然后回到原来的大小，然后鼠标移出。

问题是当图像被缩放时，它会增加其大小并将表格行的其他图像推到两侧。

它有办法防止这种情况吗？即使图像高于另一个图像。

这是代码：

$(document).ready(function(){
  $("img.menu").mouseover(function(){
    $(this).animate({height:300,width:300,opacity:1.0},"fast");
  });
  $("img.menu").mouseout(function(){
    $(this).animate({height:256,width:256,opacity:1.0},"fast");
  });
});

img.menu 图像放置在 HTML 表格行中。

图片在这里：

<table border="0" width="700" height="350">
<tr>
<td><img id="about" class="menu" src="img/agenda.png" /></td>
<td><img id="links" class="menu" src="img/laptop.png" /></td>
<td><img id="toolbar" class="menu" src="img/hd.png" /></td>
</tr>
</table>

每个默认为 256x256

Answer 1

尝试这样的事情

$(document).ready(function(){
  $("img.menu").mouseover(function(){
   $(this).css({'z-index':'9999','position':'absolute'}); 
   $(this).animate({height:300,width:300,opacity:1.0},"fast");
  });

  $("img.menu").mouseout(function(){
    $(this).css({'z-index':'','position':''}); 
    $(this).animate({height:256,width:256,opacity:1.0},"fast");
  });
});