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

时间:2014-03-04 16:46:27

标签: javascript jquery html css css3

我现在正在使用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%; }

JS

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

我做错了什么?

更新

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

但是here是一个不起作用的现场演示。

2 个答案:

答案 0 :(得分:0)

您的图片代码中没有src。尝试:

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

http://jsfiddle.net/GZ8yX/

答案 1 :(得分:0)

这有点蹩脚,但是如果我首先捕获目标宽度并设置为该像素值的动画,然后用它所用的百分比替换它:

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