По-прежнему возникают проблемы с jQuery background animate - работает в Safari и IE, больше ничего! - PullRequest
0 голосов
/ 17 мая 2011

Несколько дней назад я создал тему об анимации фонового изображения.Мне посоветовали использовать определенный плагин, который работал нормально.Я использовал jQuery 1.4.2 - однако с тех пор у меня были реальные проблемы с ползунком Coda на моем веб-сайте.Затем я решил перейти на новейшую версию jQuery (1.6.1), и проблема была решена.С другой стороны, моя фоновая анимация сломалась в некоторых браузерах.

Странно то, что он работает в сафари на Mac, а именно в 9, 8, 7 и даже 6 с прозрачным исправлением png.Это не работает для меня в Firefox на Mac или ПК и Opera на Mac.

У кого-нибудь еще были такие проблемы?Я потратил некоторое время на создание этих изображений и хотел бы отсортировать их!Должен быть какой-то способ обойти это, или, может быть, код, который я написал, просто неверен!?

Я сделал скрипку с реальными изображениями и сценарием.Это первое, что я сделал, так что я не уверен на 100%, что все сделал правильно, не стесняйтесь сказать, нужно ли его настроить ...

Вы можете найти jsfiddle здесь

Большое спасибо:)

Ответы [ 3 ]

0 голосов
/ 17 мая 2011

Это работает в FF4, используя "background-position : x, y" вместо 2 отдельных свойств:

$('.trans_bg').css({
    backgroundPosition: "0 0"
});

$('.trans_bg').hover(

function() {
    $(this).stop().animate({
        backgroundPosition: "0 -250"
    }, 500);
}, function() {
    $(this).stop().animate({
        backgroundPosition: "0 0"
    }, 400);
});

http://jsfiddle.net/69hZY/4/

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

Нашел очень хороший плагин, связанный с официального сайта отслеживания ошибок jQuery, http://bugs.jquery.com/ticket/9621

Вот ссылка на плагин на git hub, без проблем решившая мою проблему.

http://github.com/louisremi/jquery.backgroundXY.js

Точно так же, как вы знаете, если браузер не реализует эти свойства, он не будет обрабатываться базовой библиотекой jquery.Надеюсь, это поможет.

0 голосов
/ 17 мая 2011

выглядит красиво. Не будет работать вообще.

Проблема в том, что background-position-x и background-position-y не являются спецификациями W3C. Я знаю, что сам несколько раз сталкивался с проблемой.

Вы можете обойти это, вручную создав таймер и вручную перестроив background-position с его парными значениями x / y, но анимация jQuery вам не подойдет, потому что background-position не является числовым значением.

Плагин анимирования background-position у вас не работает?

...