Анимация фоновой позиции y в Firefox с помощью Jquery

Я пытаюсь анимировать только позицию y фонового изображения.

код отлично работает во всех браузерах, кроме Firefox. Я заметил в предыдущем обсуждении, что у FF есть проблема с background-position-y но я не хочу включать плагин только для этого конкретного случая.

$(".module").animate({
    "height": 160,
    "background-position-y": cropsize //variable for needed position
}, "slow");

как ответили в этом вопросе:по - прежнему возникают проблемы с jQuery background animate-работает в safari и IE, ничего больше! я должен быть в состоянии использовать простой background-position свойство, но это только нарушило анимацию в других браузерах.

$(".module").animate({
    "height": 160,
    "background-position": "0 "+cropsize+"px"
}, "slow");

возможно, это просто синтаксическая ошибка, которой мне не хватает, но я не могу заставить это работать в FF (последняя версия)

8
css firefox jquery jquery-animate

8 ответов

background-position-x/y на самом деле не является частью какой-либо спецификации CSS, ее специфический CSS IE, добавленный в IE5.5, а затем реализован Webkit.

Opera и Firefox не принимают его.

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

чтобы добавить немного к ответу Луки, что несколько неправильно, хотя метод правильный, самый простой способ использовать step метод должен анимировать некоторое произвольное значение и зацепить шаг ему что-то вроде:

$('elem').animate({
  'border-spacing': -1000
},
{
  step: function(now, fx) {
    $(fx.elem).css("background-position", "0px "+now+"px");
  },
  duration: 5000
});

элемент должен быть обернут в стиль jQuery, чтобы принять методы jQuery, такие как css(). Я использовал border-spacing, но любое свойство css, которое не повлияет на ваш сайт, будет работать, просто не забудьте установить начальное значение в CSS для используемого свойства css.

The step метод также может использоваться отдельно, если вы установите fx.старт и fx.конечные значения, используя его, как Лука делает с now+=1 в значительной степени равно просто с помощью setInterval но идея была все равно здравой.

скрипка

EDIT:

С новыми версиями jQuery есть и другие варианты, см. Этот ответ :

jQuery анимировать фоновое изображение на оси Y

16

firefox не понимает фоновую позицию с jQuery animate, но firefox принимает CSS3 animate.

код:

  if ($.browser.mozilla) {      
     $('.tag').css({
               'background-position': 'center 0px',
               '-moz-transition': 'all 1500ms ease'
     })
  } else {
     $('.tag').animate({
               'background-position-y': 0
     }, 1500);
  }
3

похоже, что анимация jquery будет принимать только одно свойство фона, а не оба. Вы можете использовать либо проценты, либо пиксели, оба в порядке. Но из того, что я могу сказать, нет способа указать только координаты x или y. Надеюсь, кто-то может доказать мне, что я ошибаюсь, но это то, что эта скрипка, кажется, показывает:

http://jsfiddle.net/JMC_Creative/dPjSz/

кроме того, независимо от того, какие значения фоновой позиции вы помещаете в css, анимация jquery всегда кажется, что начинается с " 0 50%". Хммм...

2

используйте параметр шага:

  $("item").animate({
           opacity:1,
       }, 
      step: function(now, fx){ 
          $(fx.elem).css("background-position","0px "+now+"px");
          now+=1;
      }
});

из документации jQuery:http://api.jquery.com/animate/#step

1
$initElement.addClass(initClass).animate(
            {height:[0, 'easeInCirc'], top:  ['+=' + initHeight, 'easeInCirc'] , borderSpacing:[initHeight,'easeInCirc']}, 
            {step: function(now, fx) {
                $initElement.css({"background-position" : "0px -"+now+"px"}
                )},
            },
            {duration: time4design, queue:false},
            function(){ $initElement.removeClass(initClass)});
0
var x = 0; var y = 0;
window.setInterval(function() {
    $(".layer").css("background-position", x + "px " + y + "px");
    x++; y--;
}, 50);

Это было легко : -) источник с примером в http://makeasite.ru/blog/animate-background-position-firefox.html

0

background-position анимация работает только с jQuery 1.5.2 или ниже

-1

в jQuery вы можете анимировать background-position-x или y такой: 

$(selector).animate({ 
                       backgroundPositionY: amountToAnimate 
                    }, duration);

идея в том, что в JavaScript - символ является зарезервированным оператором вне строк. jQuery использует camelcase для работы с этим.

-1