Animate background position y in Firefox with Jquery

问题

I'm trying to animate only the y position of a background image.

Code works great in all browsers besides Firefox. I've noticed in prior discussion that FF has a problem with background-position-y but I don't want to include a plugin just for this particular case.

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

As answered in this question: Still having problems with jQuery background animate - works in safari and IE, nothing else! I should be able to use the plain background-position property, but doing so has only broken the animation in other browsers.

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

Perhaps it's just a syntax error I'm missing, but I can't seem to get this working in FF (Latest version)

回答1:

background-position-x/y is not really part of any CSS spec, its IE specific CSS, added to IE5.5, and later implemented by Webkit.

Opera and Firefox do not accept it.

The best solution is to use the step method, that will let you animate just about anything.

To add a little to Luka's answer, which is somewhat wrong even though the method is correct, the easiest way to use the step method is to animate some arbitrary value, and hook a step to it, something like:

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

The element will have to be wrapped jQuery style to accept jQuery methods, like css(). I've used border-spacing, but any css property that will not affect your site will work, just remember to set an initial value in your CSS for the css property used.

The step method can also be used alone, if you set the fx.start and fx.end values, using it like Luka does with now+=1 is pretty much equal to just using a setInterval instead, but the idea was sound all the same.

FIDDLE

EDIT:

with newer versions of jQuery there are other options as well, see this answer :

JQuery Animate Background Image on Y-axis

回答2:

The firefox don't understands the background-position with jquery animate, but firefox accepts css3 animate.

Code:

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

回答3:

It looks like jquery's animate will only take one background property, not both. You can use either percentages or pixels, both are okay. But from what I can tell, there's not a way to specify only x or y coordinates. Hopefully someone can prove me wrong on that, but that's what this fiddle seems to show:

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

Also, no matter what background-position values you put into css, the jquery animation always seems to start from "0 50%". Hmmm...

回答4:

use step parameter:

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

From the jQuery documentation: http://api.jquery.com/animate/#step

回答5:

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

回答6:

var x = 0; var y = 0;
window.setInterval(function() {
    $(".layer").css("background-position", x + "px " + y + "px");
    x++; y--;
}, 50);

That was easy :-) Source with example at http://makeasite.ru/blog/animate-background-position-firefox.html

回答7:

background-position animation is only work with jQuery 1.5.2 or below

回答8:

in jQuery you can animate background-position-x or y like this:

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

The idea being that in javascript the - character is an reserved operator outside of strings. jQuery uses camelcase to work around this.

来源：https://stackoverflow.com/questions/10449474/animate-background-position-y-in-firefox-with-jquery

标签

jquery

css

firefox

jquery-animate