Положение фона в jquery

Ответ 1

Вам не нужно использовать плагин background animate, если вы используете только отдельные значения:

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

Ответ 2

Я предполагаю, что это может быть потому, что он ожидает единственное значение?

взятый из страницы animate на jQuery:

Свойства и значения анимации

Все анимированные свойства должны быть анимированы до одного числового значения, кроме как указано ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием основных функций jQuery. (Например, ширина, высота или слева могут быть анимированы, но фоновый цвет не может быть.) Значения свойств обрабатываются как количество пикселей, если не указано иное. Единицы em и% могут быть указаны там, где это применимо.

Ответ 3

Так как jQuery не поддерживает это из коробки, лучшим решением, с которым я столкнулся до сих пор, является определение собственного CSS hooks в jQuery. По сути, это означает определение пользовательских методов для получения и установки значений CSS, которые также работают с jQuery.animate().

В github уже есть очень удобная реализация: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

С помощью этого плагина вы можете сделать что-то вроде этого:

$('#demo1').hover(
  function() {
    $(this).stop().animate({
      backgroundPositionX: '100%',
      backgroundPositionY: '100%'
    });
  },
  function () {
    $(this).stop().animate({
      backgroundPositionX: '105%',
      backgroundPositionY: '105%'
    });
  }
);

Для меня это работало во всех проверенных браузерах, включая IE6 +.

Я сделал быстрый demo через некоторое время назад, и вы можете разорвать его на части, если вам нужны дальнейшие указания.

Ответ 4

Функция iQuery animate не предназначена исключительно для непосредственного анимации свойств DOM-объектов. Вы также можете изменять переменные и использовать функцию шага для получения переменных для каждого шага анимации.

Например, чтобы анимировать фоновое положение из фонового положения (0px 0px) в фоновое положение (100px 500px), вы можете сделать это:

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, {
    duration: 1000,
    step: function() {
        var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
        $("#your_div").css("background-position",  position);
    }
});

Просто забудьте не забыть this. внутри функции шага.

Ответ 5

В коде jQuery есть запятая после части backgroundPosition:

backgroundPosition: '-20px 0px',

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

UPDATE: в ограниченном тестировании, которое я сделал сейчас, ввод чисто числовых значений (без "px" ) работает для backgroundPosition в методе .animate(). Другими словами, это работает:

backgroundPosition: '-20 0'

Однако это не так:

backgroundPosition: '-20px 0'

Надеюсь, что это поможет.

Ответ 6

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

Чтобы решить эту проблему, просто включите "Плагин фоновой позиции" , и вы можете анимировать фоны по своему усмотрению.

Ответ 7

Вы также можете использовать математическую комбинацию "- =" для перемещения фона

$(this).animate( {backgroundPositionX: "-=20px"} ,500);

Ответ 8

попробуйте backgroundPosition:"(-20px 0)"

Просто дважды проверьте, ссылаетесь ли вы на этот плагин background position

Пример этого на jsfiddle с плагином положения фона.

Ответ 9

Вы можете изменить положение фона изображения с помощью метода setInterval, см. здесь демо: http://jquerydemo.com/demo/animate-background-image.aspx

Ответ 10

У меня есть div My_div 250px x 250px, фоновое изображение также 250 x 250

CSS

#My_div {
    background: url("..//img/your_image.jpg") no-repeat;
    background-position: 0px 250px;
}

JavaScript:

$("#My_div").mouseenter(function() {
    var x = 250;
    (function animBack() {
        timer = setTimeout(function() {
            if (x-- >= 0) {
                $('#My_div').css({'background-position': '0px '+x+'px'});;
                animBack();
            }
        }, 10);
    })();

});
$("#My_div").mouseleave(function(){
    $('#My_div').css({'background-position': '0px 250px'}); 
    clearTimeout(timer);
}); 

Я надеюсь, что это поможет

Ответ 11

Использование Firefox:
указав два значения: Не работает с какой-либо комбинацией синтаксиса, как указано выше. Используя Firebug, я получаю "Ошибка в анализируемом значении для" background-position ". Декларация отменена". пока анимация не закончится.

'backgroundPosition': '17.5em '- значение 1: работает в FF и CHrome OPera, SF (Safari) и IE, с оговоркой, что второе значение или позиция y (по вертикали) получает значение "center". Из Firebug стиль стилей устанавливается в:
style = "background-position: 17.5em center;"

Ответ 12

function getBackgroundPositionX(sel) {
    pos = $(sel).css('backgroundPosition').split(' ');
    return parseFloat(pos[0].substring(0, pos[0].length-2));
}

Это возвращает значение [x]. Длина номера не имеет значения. Может быть, например, 9999 или 0.