無法動畫動畫的絕對定位圖像的寬度

我現在正在使用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

無法動畫動畫的絕對定位圖像的寬度

回答

相關問題