Почему анимация jQuery прерывается в браузерах на основе webkit? - PullRequest
Новая
       15

Почему анимация jQuery прерывается в браузерах на основе webkit?

14 голосов
/ 17 декабря 2011

Я работаю с очень простой анимацией: сдвигаю линию изображений влево: 

$('#button').click(
    function() {
        $('div#gallery').animate({scrollLeft:'+=800px'}, 1000);
    }
);

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

В любом случае, несмотря на попытки различных параметров замедления, даже на медленных скоростях анимация была очень изменчивой в Chrome и Safari, но всегда гладкой в ​​Internet Explorer и Firefox.(Большинство проблем, поднятых в Интернете, касаются IE или Firefox нестабильности!)

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

Ответы [ 3 ]

12 голосов
/ 26 марта 2013

Для меня не имеет значения, были ли это 24-битные PNG, 8-битные PNG, GIF, JPEG и т. Д., Если на экране было большое изображение, были проблемы с моей анимацией. Если у вас есть элементы z-index'ed над большим изображением, попробуйте добавить этот CSS в ваш элемент:

-webkit-transform: translateZ (0);

Для меня это сработало, но оставило артефакты анимации.

Что окончательно решило это для меня, так это просто изменить это: 

$('#myimage').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

К этому: 

$('#myimage').animate({
    height: '-=1'
}, 1, 'linear').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

Я только что добавил небольшую анимацию в 1 миллисекунду в начало. Я подумал, что он, возможно, "подготовит" Chrome к реальной анимации, и это сработало. Вы можете изменить его на 20 или 50 миллисекунд, чтобы быть в безопасности.

7 голосов
/ 17 декабря 2011

В моем случае проблема была не в коде, а в изображениях, в частности в больших изображениях, которые были (принудительно) уменьшены с помощью свойства css width. Конечно, для анимации больших изображений может потребоваться больше обработки, но IE и FF, кажется, справляются с ними очень хорошо уменьшенными (в моем случае изображения шириной 2000px были масштабированы до ширины 800px). Между тем, похоже, что Chrome и Safari увязли в анимации таких изображений. После того, как я сжал все мои изображения в Photoshop до на самом деле шириной 800px, анимация была плавной везде.

Другие детали. Я использую jQuery 1.7. Я столкнулся с проблемой анимации самого элемента img, а также элемента div с фоновым изображением.

1 голос
/ 27 августа 2012

Я понимаю, что эта ветка старая, но в интересах эффективного кодирования ... я недавно столкнулся с похожей проблемой с изменчивой анимацией с использованием Chrome и в поисках решения натолкнулся на эту ветку (но не на FF или IE ) проследил проблему с одним из моих значков свертывания, используя png, а не gif (как только я поменял png на gif), в браузере webkit не возникло проблем с получением плавной анимации (но как только я снова переключил png моя анимация снова была неспокойной ...)

...