0

マウスオーバーすると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 です

4

1 に答える 1

0

このようなことを試してください

$(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");
  });
});
于 2012-09-08T05:09:01.960 に答える