鼠标悬停时放大图像而不使用Jquery推送其他图像？

Question

当您将鼠标悬停在Google图片正在使用的图像缩略图上时,我正在尝试创建图像放大效果.但是,我遇到的问题是,放大的图像会根据放大的图像位置将另一个图像推到另一个位置.

这是我到目前为止所拥有的:

<style>
img{float:left;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#I1").mouseover(function(){

    $("#I1").animate({height:300,width:300},"fast");
   });
 $("#I1").mouseout(function(){
    $("#I1").animate({height:96,width:128},"fast");
   });
});
</script> 

 <img id="I1" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
<img id="I2" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >

Answer 1

你试过给它一个比其余的更高的z指数和绝对位置吗？你肯定需要给它一个绝对的位置 - 这就是你如何从DOM堆栈中删除它并让它独立浮动,而不需要让其他元素依赖它.

或者,您可以像我在这里一样玩克隆:

..删除旧网址..

更新了更多"图像",更流畅的动画,并删除了之前用于使图像卡住的错误..

http://jsfiddle.net/Swader/jKTVn/7/