Привет, я работаю над веб-сайтом с моим другом, и с самого начала наш клиент был недоволен качеством одной из наших анимаций. Эта анимация берет изображение и увеличивает его, затем делает его меньше и повторяется, чтобы получить эффект пульсации. Непрозрачность также меняется на протяжении всей анимации.
Текущая анимация находится на главной странице сайта http://laveryrowe.com . Рассматриваемая анимация - это 75% -ное изображение, которое вы можете увидеть сразу же по прибытии на сайт.
Я тестировал в Safari, Firefox и Internet Explorer. Анимация почти не уступает в Firefox, однако Safari и Internet Explorer не обеспечивают достаточно плавного изменения размеров для нашего клиента.
Кто-нибудь знает лучший метод анимации, чем тот, который я использовал? (см. код ниже и посетите сайт для примера.)
function pulse() {
$('#seventyfive').animate({
marginTop: 175,
marginLeft: 25,
width: 261, height: 98,
opacity: 0.5
}, 700, function() {
$('#seventyfive').animate({
marginTop: 161.95,
marginLeft: 15.2,
width: 287.1, height: 107.8,
opacity: 1
}, 700, function() {
pulse();
});
});
};
Большое спасибо заранее, Мы действительно могли бы использовать руку,
Изменить: Проблема не в позиционировании (или, по крайней мере, я не думаю, что это так), это больше связано с изменением размера изображения, вы можете заметить дрожащие края, когда оно становится больше. Кажется, что это выглядит лучше с увеличением непрозрачности, но мне нужно такое же качество, когда оно непрозрачно.
Jai