无法为绝对定位图像的宽度设置动画答案

【问题标题】：Unable to animate width of absolute positioned image无法为绝对定位图像的宽度设置动画
【发布时间】：2014-03-04 16:46:27
【问题描述】：

我目前正在使用 jQuery 10.4.2。我想平滑地放大绝对定位的图像。当我使用以下代码时，我没有收到任何错误，但动画不会发生。相反，图像只是捕捉到完整的 (100%) 大小。

HTML

<div class="box">
    <img class="scaleMe" src="img.gif" />
</div>

CSS

.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }

    $('.scaleMe').animate({width:'100%'}, 2000);

我做错了什么？

更新：

这是一个有效的 jsFiddle：http://jsfiddle.net/s_d_p/27DhK/

但是here 是一个无法运行的现场演示。

【问题讨论】：

你使用$(document).ready();或者什么叫你的动画？
抱歉打错了。我am绝对在图像上使用src 属性（现已添加）并且JS 在jQuery(document).ready(...) 内运行

标签： javascript jquery html css

【解决方案1】：

您的图像标签上没有 src。试试：

<div class="box">
    <img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>

http://jsfiddle.net/GZ8yX/

【讨论】：

抱歉，打错了。
使用 src 标签，它对我有用。它仍然给你带来问题吗？如果有，它们是什么？
我的仍然无法正常工作。这是一个现场演示：secretdesignproject.com/demo/daosawan/7
我在上面的问题中添加了现场演示的链接。我无法放大图像。它会立即捕捉到最终大小。
这是一些 jquery 版本的错误，将百分比更改为固定像素宽度并且它可以工作（或更改 jquery）。 stackoverflow.com/questions/6877081/…

【解决方案2】：

这有点蹩脚，但如果我先捕获目标宽度并为该像素值设置动画，然后用百分比替换它就可以了：

var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
    oli.animate({width:toWidth}, 2000, function(){
        oli.removeAttr("style");
        oli.css("width", "100%");
    });
}

【讨论】：