JQuery - Как можно плавно изменить размер изображения, чтобы создать эффект пульсации?

Привет, я работаю над веб-сайтом с моим другом, и с самого начала наш клиент был недоволен качеством одной из наших анимаций. Эта анимация берет изображение и увеличивает его, затем делает его меньше и повторяется, чтобы получить эффект пульсации. Непрозрачность также меняется на протяжении всей анимации.

Текущая анимация находится на главной странице сайта 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

8
задан Jai 28 April 2011 в 18:19
поделиться