Я использую 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/
Но вот живая демонстрация, которая не работает.
Это немного хромает, но если я сначала фиксирую целевую ширину и анимирую ее значение, а затем заменяю ее процентом, который он работает:
var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
oli.animate({width:toWidth}, 2000, function(){
oli.removeAttr("style");
oli.css("width", "100%");
});
}
У вас нет src на вашем теге изображения. Пытаться:
<div class="box">
<img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>
src
atttribute на изображении (теперь добавляется) и JS работает вjQuery(document).ready(...)