使用jquery动画放大图片只适用于Firefox

当我将鼠标悬停在图片上时，我想要放大（但保留原样）的图片。图像大小相同（50x15小，放大到100x30）。我更喜欢光滑的动画效果，我使用jquery动画功能来增加图像大小并稍微调整图像的位置。使用jquery动画放大图片只适用于Firefox

HTML：

<table> 
<tr> 
    <td align="center" valign="top"><div class="magContainer"><img src="images/unprocessed-lg.png" class="blockreqBtn" /></div></td> 
</tr> 
</table>

CSS：

.magContainer { 
    margin: 0px; 
    position: relative; 
    width: 50px; 
    text-align: left; 
    border: 1px solid #000000; 
} 

img.blockreqBtn { 
    position: fixed; 
    cursor: pointer; 
    z-index: 0; 
    height: 15px; 
    width: 50px; 
}

的jQuery：

$(".blockreqBtn").hover(function() { 
    // hover in 
    $(this).animate({ 
     height: "30", 
     width: "100", 
     left: "-=25", 
     top: "-=8" 
    }, "fast"); 
}, function() { 
    // hover out 
    $(this).animate({ 
     height: "15", 
     width: "50", 
     left: "+=25", 
     top: "+=8" 
    }, "fast"); 
});

我遇到的问题是，这工作完全在Firefox 10.0，但均以惨败失败我测试的其他浏览器。如果我在IE8，Safari 5.1.4或最新的Chrome浏览器中尝试此操作，则图像会跳到浏览器窗口的左上角。尺寸调整很好，但为什么我的图像跳出位置？

来源

2012-03-27 Tanoro

position:fixed应该是相对于浏览器窗口工作，而不是相对于包含元素。删除你的CSS的一部分，你应该没问题。

来源

2012-03-27 18:23:13 Blazemonger

如果我这样做了，容器会像图片一样放大，但是我希望它在指向它时“向前浮动”，并保留所有其他页面元素。 – Tanoro 2012-03-27 18:27:19

然后用'position：absolute'代替。问题是你没有正确使用'position：fixed'，这导致了不良行为。 – Blazemonger 2012-03-27 18:30:24

我只是试过了，它工作。谢谢。我想知道为什么Firefox同意它。它是不寻常的，因为它是害群之马。 – Tanoro 2012-03-27 18:43:55

使用jquery动画放大图片只适用于Firefox

回答

相关问题