JQuery анимировать фоновое положение

Question

Я не могу заставить это работать.

$('#product_family_options_dd').animate({
  height: '300px',
  width: '900px',
  backgroundPosition: '-20px 0px',          
},

Высота и ширина анимируются, но не фон.

Answer 1

Вам не нужно использовать плагин фоновой анимации, если вы просто используете отдельные значения, подобные этому:

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

Answer 2

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

взято со страницы анимации в jQuery :

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

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

Answer 3

Поскольку jQuery не поддерживает это из коробки, лучшее решение, с которым я сталкивался до сих пор, - это определить свои CSS-хуки в 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 +.

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

Answer 4

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

Например, чтобы анимировать background-position из background-position (0px 0px) в background-position (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. внутри функции шага.

Answer 5

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

backgroundPosition: '-20px 0px',

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

ОБНОВЛЕНИЕ: В ограниченном тестировании, которое я только что сделал, введитечисто числовые значения (без «px») работают для backgroundPosition в методе .animate ().Другими словами, это работает:

backgroundPosition: '-20 0'

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

backgroundPosition: '-20px 0'

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

Answer 9

try backgroundPosition:"(-20px 0)"

Просто для двойной проверки вы ссылаетесь на этот плагин background position ?

Пример его использования на jsfiddle сПлагин фоновой позиции.

Answer 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);
}); 

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