使用animate（）进行图像缩放

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/