jQuery image animate
<p>I have a row of images that animate trought jQuery (zoom effect) when mouseover, and then gets back to their original size then mouseout.</p>

<p>The problem is that when an image gets zoomed, it increases its size and push the other images of the table row to the sides.</p>

<p>Its there a way to prevent this? Even if an image gets above another.</p>

<p>Here is the code:</p>

<pre><code>$(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");
  });
});
</code></pre>

<p>The img.menu images are placed in a HTML table row.</p>

<p>The images are here:</p>

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

<p>each one is 256x256 by default</p>
