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");
  });
});

jQuery图像动画

1 个答案: