Невозможно анимировать ширину абсолютно позиционированного изображения

0

Я использую 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/

Но вот живая демонстрация, которая не работает.

  • 0
    Используете ли вы $ (документ) .ready (); или как назвать вашу анимацию?
  • 0
    Извините, это была опечатка. Я определенно с помощью src atttribute на изображении (теперь добавляется) и JS работает в jQuery(document).ready(...)

2 ответа

0

Это немного хромает, но если я сначала фиксирую целевую ширину и анимирую ее значение, а затем заменяю ее процентом, который он работает:

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

У вас нет src на вашем теге изображения. Пытаться:

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

http://jsfiddle.net/GZ8yX/

  • 0
    Извините, это была опечатка.
  • 0
    С тэгом src он работает у меня в скрипке. Это все еще доставляет вам проблемы? Если так, то кто они?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню