jQuery animate background position

Question

I can't seem to get this working.

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

The height and width animate but not the background.

Bircher

just wondering should backgroundPosition be background-position maybe also background-position-x and background-position-y could be set? – Melliemelliferous

I tried backgroun-position-x/y and it seemed to work as expected in Chrome10, but not in FF3 (didn't test in any other browsers) – Mcauley

Answer 1

You don't need to use the background animate plugin if you just use separate values like this:

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

Inconsequent

this one works in ff: #5519334 – Esmeralda

Mozilla removed support for background-position-x and background-position-y in FF3, stating it was not in the HTML spec, so this no longer works. – Missioner

DON'T USE THIS ANSWER - even if it has the highest vote count. It does not work in Firefox as FF does not provide the background-position-x/y properties. – Terce

Answer 2

I guess it might be because it is expecting a single value?

taken from the animate page on jQuery:

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

Melliemelliferous

That's completely right and you'll have to add a CSS hook to make background-position usable with animate() and single values on alle browsers: https://mcmap.net/q/327040/-jquery-animate-background-position – Encephalomyelitis

This was spot on, and just to clarify for anyone finding this as I did, specify background-position-x and background-position-y as separate values. Don't just use background-position. – Paraldehyde

Answer 3

Since jQuery doesn't support this out of the box, the best solution I have come across so far is to define your own CSS hooks in jQuery. Essentially, this means to define custom methods to get and set CSS values which also works with jQuery.animate().

There is already a very handy implementation for this on github: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

With this plugin in place, you can do something like this:

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

For me, this worked on all browsers tested so far including IE6+.

I did put a quick demo online a while ago and you can rip it apart if you need further guidance.

Encephalomyelitis

This helped me make a custom lightswitch style toggle skin for checkboxes. Simple and clean. – Antivenin

Answer 4

jQuery's animate function is not exclusively usable for directly animating properties of DOM-objects. You can also tween variables and use the step function to get the variables for every step of the tween.

For example, to animate a background-position from background-position(0px 0px) to background-position(100px 500px) you can do this:

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

Just make sure to not forget the this. inside the step function.

Deferent

Answer 5

In your jQuery code there is a comma after the backgroundPosition portion:

backgroundPosition: '-20px 0px',

However, when listing the various properties you want to change in the .animate() method (and similar methods), the last argument listed between curly braces should not have a comma after it. I can't say if that's why the background position isn't getting changed, but it is an error and one I'd suggest fixing.

UPDATE: In the limited testing I've done just now, entering purely numerical values (without "px") works for backgroundPosition in the .animate() method. In other words, this works:

backgroundPosition: '-20 0'

However, this does not:

backgroundPosition: '-20px 0'

Hope this helps.

Ish

This works because you are animating the first value, for background-position-x, if you try this method to animate the background-position-y property it won't work. And you can't use background-position-y and support Firefox at the same time... – Waggoner

Answer 6

You cannot use simple jquery's Animate to do that as it involves 2 values.

To solve it just include Background Position Plugin and you can animate Backgrounds at will.

Bendicta

This is unnecessary -- see my answer – Inconsequent

@Inconsequent background-position-y and background-position-x are not supported in Firefox. – Waggoner

The plugin URL is dead. A working plugin can be found here: github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js Some info about its usage incl. a demo is available here: marcloehe.de/demos/jquery-animatebg – Terce

Answer 7

You can also use math combination "-=" to move background

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

Hart

Answer 8

try backgroundPosition:"(-20px 0)"

Just to double check are you referencing this the background position plugin?

Example of it on JSFiddle with the background position plugin.

Lala

plugin link is dead, there is no such plugin on jquery.com anymore – Ichthyosis

The plugin URL is dead. A working plugin can be found here: github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js Some info about its usage incl. a demo is available here: marcloehe.de/demos/jquery-animatebg – Terce

Answer 9

You can change the image background position using setInterval method, see demo here: http://jquerydemo.com/demo/animate-background-image.aspx

Extol

Answer 10

I have a div My_div 250px x 250px, a background image also 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);
}); 

I hope it help

Brittaney

Answer 11

Using Firefox:
specifying two values: Doesn't work with any combination of syntax -- as several pointed out above. Using Firebug, I get "Error in parsing value for 'background-position'. Declaration dropped." until the animation ends.

'backgroundPosition': '17.5em' -- specifiying 1 value: works in FF and CHrome OPera, SF(Safari) and IE, with a caveat that the 2nd value or y position (vertical) gets set to "center". From Firebug, the element's style gets set to:
style="background-position: 17.5em center;"

Lavettelavigne

Answer 12

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

This returns [x] value. Length of number has no matter. Could be e.g. 9999 or 0.

Satire

No vote just yet, but I fail to see the relevance of the answer to the question – Appositive