jQuery image animate

Question

У меня есть ряд изображений, которые оживляют 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"); 
    }); 
});