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

我现在正在使用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是现场演示不起作用。

来源

2014-03-04 emersonthis

你使用$（document）.ready（）;或者什么来调用你的动画？ – enguerranws

对不起，这是一个错字。 * * *绝对在图像上使用'src' atttribute（现在添加）并且JS在'jQuery（document）.ready（...）'中运行' – emersonthis

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

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

http://jsfiddle.net/GZ8yX/

来源

2014-03-04 16:53:23

对不起，这是一个错字。 – emersonthis

使用src标签，它适用于我的小提琴。它仍然给你的问题？如果是这样，他们是什么？ –

我仍然无法找到我的工作。这里有一个现场演示：http://secretdesignproject.com/demo/daosawan/7/ – emersonthis

这有点跛，但如果我第一次捕捉目标宽度和动画到的像素值，然后用一个百分比替代它，它的工作原理：

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

来源

2014-03-04 17:39:14 emersonthis

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

回答

相关问题