使用动画的图像缩放（）

Question

我找到了一个使用animate（）进行图像缩放的网站。但是，他已经实施了一些内容。我试图让它在任何图像上工作。

Here is the link to the code

我的要求是自动查找图像标记并在其上应用此效果。为此，我已经改变了代码

$('ul.gallery li img') to $('img') 

假设下面是我的HTML代码..

<img src="/xxx.jpg"><p>jghjghjegejf</p><img src="/2.jpg"> 

但缩放图像出现在窗口的左上角。

Here is the link to jsfiddle

Answer 1

每个在原剧本中的图像是在一个<li>与下面的样式应用：

ul.gallery li { float: left; position: relative; width: 110px; height: 110px; } 

最重要的部分是position: relative。这为图像提供了一个参考点，用于在增长时定位自己。由于您将代码应用于不在relative - position ed元素中的图像，因此它们将整个相对于文档进行定位。

如果不将它们放入容器中，您无法轻松使图像的行为如此。

Answer 2

我只是做了小修改，使得对于更流畅的动画体验，不排队鼠标悬停多个动画：http://jsfiddle.net/Z97Qa/