Почему это не удается оживить?

$(document).ready(function() { 
$('.overlay-1').css({backgroundPosition:'30% 100%'}); 

var to; 

function infinite(){ 
to = setTimeout(function(){ 
$('.overlay-1').animate({backgroundPosition:"30% 2000%"},12000,function(){ 
    $('.overlay-1').css({backgroundPosition:'30% 100%'}); 
    infinite(); 
    });  
    }); 
} 
infinite(); 


});

Почему эта ошибка не позволяет анимировать фоновое изображение? Он предназначен для бесконечного прокрутки фонового изображения, но ничего не движется?Почему это не удается оживить?

Cheers, Sam

источник

2014-02-04 Sam Slater

Возможно, в этом случае могут работать анимации CSS. – Hless

Как сделать цикл анимации CSS? –

Мне тоже интересно это, я попробую написать второй ответ. – Hless

Вам нужно раздельные фоновые позиции в анимировать функцию, JQuery не может обрабатывать несколько аргументов CSS, как это. Пример:

$('.overlay-1').animate({ 
    'background-position-x': '30%', 
    'background-position-y': '2000%'},12000, function(){});

EDIT: Просто понял, что это не будет работать в FF. Попробуйте этот файл для Firefox: jquery animate background-position firefox

источник

2014-02-04 09:33:23 Hless

Спасибо. Требуется ли CSS также отдельные фоновые позиции? Это первые дни для моего jQuery, я не думаю, что вы могли бы расширить свой ответ немного, не так ли? Cheers, Sam –

Я не думаю, что это происходит, потому что в большинстве браузеров свойство CSS background-position анализируется в свойствах background-position-x' background-position-y'. Где X - горизонтальная ось, а Y - вертикальная ось. Однако Firefox не использует отдельные свойства для каждой оси. Вот почему это не работает в Firefox. – Hless

Если честно, я бы лично пошел с анимацией CSS (см. Мой другой ответ). Он просто чувствует себя более крепким для меня. – Hless

Вы можете использовать анимацию CSS3. Обратите внимание, что он не поддерживается во всех браузерах. Вы можете просматривать браузер здесь: http://caniuse.com/css-animation.

Для браузеров, таких как IE9, вы можете использовать статическое изображение, чтобы постепенно уменьшать пользовательский интерфейс для старых браузеров.

Я написал небольшой пример того, как анимировать положение фона с помощью CSS, я бесконечно зацикливания логотипа Google в качестве фонового изображения сверху вниз: http://jsfiddle.net/xMMct/

В вашем случае это до вас поместите фоновое изображение таким образом, чтобы оно, казалось бы, прокручивалось бесконечно.

Css код:

.background { 
    background-image: url(https://www.google.nl/images/srpr/logo11w.png); 
    width: 200px; 
    height: 500px; 
    background-size: 200px auto; 
    background-repeat: no-repeat; 
    background-position: 0% -20%; 
    animation:bg 5s linear infinite; 
    -webkit-animation:bg 5s linear infinite; 
} 

@keyframes bg 
{ 
    from {background-position: 0% -20%;} 
    to {background-position: 0% 120%;} 
} 

@-webkit-keyframes bg /* Safari and Chrome */ 
{ 
    from {background-position: 0% -20%;} 
    to {background-position: 0% 120%;} 
}

Вот еще скрипка, где фон, кажется, прокрутка без конца (простите маленький пропуск через каждые 5 секунд, значения не совершенны) http://jsfiddle.net/xMMct/1/

Редактировать : Лучший пример (без пропусков) http://jsfiddle.net/xMMct/2/

источник

2014-02-04 10:12:01 Hless

Почему это не удается оживить?

ответ

Смежные вопросы