Полноэкранная анимация плавного появления / исчезновения jQuery заикается в браузерах на основе webkit (Chrome / Safari)

У меня есть несколько (почти) полноэкранных анимаций постепенного появления/исчезновения на моем веб-сайте, которые заикаются в Safari и Chrome (Windows 7 64bit, jQuery 1.7.2): (http://portfolio.wezelkrozum.nl/#page=news&par1=article&par2=1&par3=)

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

Итак, как я могу улучшить анимацию затухания?


jquery webkit fadein
person Wezelkrozum    schedule 04.05.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте этот плагин 2D Transformations. Не нужно ничего редактировать, просто включите .js в . Когда это возможно, он будет использовать переходы css в вызовах анимации jQuery.

Я открыл ваш сайт в Chrome (OS X) и Safari (OS X), анимация выглядит нормально.

РЕДАКТИРОВАТЬ:

1) добавить стиль -webkit-transform: translateZ(0); к wrapper (обтекает миниатюры) и к article_images_manager . Он активирует ускорение графического процессора в Webkit. :-)

2) в качестве миниатюр следует использовать не полные изображения, а предварительно сгенерированные маленькие.

person babca    schedule 04.05.2012
comment
Я добавил плагин, но, к сожалению, не увидел повышения производительности. Я использую jQuery 1.7.2, может быть, он уже использует переходы css3? - person Wezelkrozum; 04.05.2012
comment
(Не могу отредактировать свой комментарий, поэтому :) Я использую Windows 7, но это не должно иметь значения. Заикание анимации применимо только к средству просмотра изображений. - person Wezelkrozum; 04.05.2012
comment
Открыл ваш веб-сайт в Windows/Firefox и Windows/Chrome - суперплавные переходы с исчезновением как в FF, так и в Chrome на рабочем столе более 2 лет со сверхстарой картой графического процессора, никаких проблем. // OT: добавьте html { overflow-y: scroll } в свой CSS, чтобы постоянно отображать полосу прокрутки ;-) - person babca; 04.05.2012
comment
Бабка, я не хочу показывать полосу прокрутки, когда средство просмотра изображений находится сверху;) Я пробовал Chrome и Safari на серверных компьютерах, и вот результаты: Chrome на слабом ПК: отсутствие анимации затухания (1 кадр) вообще в просмотрщике изображений. Chrome на ноутбуке среднего класса: заикание (2/3 кадра) исчезающей анимации при открытии или закрытии средства просмотра изображений. Нет затухающей анимации при навигации по изображениям. Safari на ноутбуке среднего класса: заикание анимации затухания. (4/5 кадров при открытии средства просмотра изображений, 2 кадра при навигации по изображениям) Safari/Chrome на высокопроизводительном ПК: заикание (~7 кадров) анимации - person Wezelkrozum; 05.05.2012
comment
Вместо этого я решил использовать анимацию slideUp. На данный момент анимация достаточно хороша. - person Wezelkrozum; 05.05.2012
comment
О, извините, я не заметил страницу галереи, только миниатюры статей, я думал, вы это имеете в виду. Я отредактировал свой ответ соответственно. - person babca; 05.05.2012
comment
2) Я знаю, это были просто эскизы для тестов. - person Wezelkrozum; 05.05.2012

arrow_upward
0
arrow_downward

Я не вижу проблемы. Вы можете попробовать переходы css3, а не анимацию jQuery. Они точно повысят производительность.

person Vic    schedule 04.05.2012