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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

Для меня это не имело значения, если это были 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 миллисекунд, чтобы быть в безопасности.

Ответ 2

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

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

Ответ 3

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