jQuery background-position анимация - PullRequest
Новая
       22

jQuery background-position анимация

2 голосов
/ 09 июня 2010

Я создал изображение, которое по сути является спрайтом CSS из 3 изображений вместе. Его размер 278x123, поэтому в основном это 3 изображения размером 278x41.

Что я пытаюсь сделать, это сделать анимацию, изменив положение фона.

Я пробовал много вещей, одно из моих не очень работающих решений следующее: 

    var $slogan = $('#header h2 span');
$slogan.css({backgroundPosition: '0px 0px'});
function slogan_animation() {
    if ($slogan.css('background-position') == '0px 0px') {
        $slogan.fadeIn('slow').css('background-position', '0px -41px').fadeOut('slow');
    }
    else if ($slogan.css('background-position') == '0px -41px') {
        $slogan.fadeIn('slow').css('background-position', '0px -82px').fadeOut('slow');
    }
    else if ($slogan.css('background-position') == '0px -82px') {
        $slogan.fadeIn('slow').css('background-position', '0px 0px').fadeOut('slow');
    }
}
setInterval(slogan_animation, 2000);

Есть идеи, как мне это сделать?

В основном мне просто нужно: - установите мою фоновую позицию на «0px 0px», затем переместите ее на «0px -41px», затем «0px -82px» и затем снова зациклите ее с «0px 0px» Было бы также здорово иметь эффект fadeIn () между ними.

Есть идеи?

Спасибо.

1 Ответ

2 голосов
/ 09 июня 2010

Стиль background-position является составным, поэтому при его чтении он может не дать ожидаемого результата. Кроме того, результат может отличаться для разных браузеров.

Попробуйте использовать переменную, чтобы отслеживать позицию, а не читать ее из стиля. Установите позицию перед началом постепенного появления: 

$(function(){

  var $slogan = $('#header h2 span');
  var offset = 0;

  window.setInterval(function(){
    $slogan.css('background-position', '0 -'+offset+'px')
    .fadeIn('slow')
    .fadeOut('slow');
    offset = (offset + 41) % 123;
  }, 2000);

});
...