backgroundPosition animate in IE

[[email protected]…]

example: <td valign="top" id="tartalom_hatter" style="background:url(img/kep.png) 1032px top repeat-y;">...</td> ... The script: jQuery('#tartalom_hatter').animate({backgroundPosition: '500px 0px'},1000); This code doesn't work in IE 8, but works in fox,opera and chrome. Error in jquery.fx.tick._default() function. The fx.now value in IE is NaN!

Sorry: I badly speak english.

[anonymous]

This is works at 1.4.2, but 1.4.3 not.

[jitter]

Thanks for taking the time to contribute to the jQuery project by writing a bug report!

The documentaion on ​animate() says

All animated properties should be a single numeric value

and

Shorthand CSS properties (e.g. margin, background, border) are not supported.

Both of these apply to background-position which means the docs say you can't use animate() to animate this property (I won't go into detail why it nonetheless works in some browsers but not in IE).

You use the cssHooks feature introduced with jQuery 1.4.3 to solve this problem or just use the ready made cssHook for background-position from the ​jquery-cssHooks plugin

Next time please submit a reduced test case, which reproduces the issue you are experiencing, on ​http://jsfiddle.net along with the report. So that we investigate the issue more quickly.

[anonymous]

I'm not positive this should be closed.

To my knowledge the shorthand for background is simply using "background" to set all of your background property values.

For example, in css it would look like: background:#ffffff url('image.png') no-repeat right top;

Anything extending background, like background-position, would not shorthand and is the most specific method of setting background-position.

As for being a single numeric value ... This seems to be true since background-position requires two values.

[anonymous]

I had good success animating background-position-y and background-position-x separately. Worked fine for me in IE8!

$(iPhoneScroll).animate({'background-position-x': -index*324+"px"}, 500);

[[email protected]…]

In version 1.4.4 this is "a problem" as well. On line 5500 it says: elem.currentStyle[ name ], with in this case name = 'backgroundPosition'.

IE only has backgroundPositionX en backgroundPositionY in the currentStyle property, so I guess backgroundPosition really is a shorthand. The behaviour here is correct although a little confusing, because of the double level of shorthand: background -> backgroundPosition -> backgroundPositionX

[Eydamos]

Beware: backgroundPositionX and backgroundPositionY are not working in Firefox and Opera

[anonymous]

Changing the code to the following fixed the problem for me:

if(isNaN(fx.now))
  fx.elem.style[ fx.prop ] = 0 + fx.unit;
else
  fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;

[anonymous]

very good!! it works! thanks.

Replying to anonymous:

Changing the code to the following fixed the problem for me:

if(isNaN(fx.now))
  fx.elem.style[ fx.prop ] = 0 + fx.unit;
else
  fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;

[[email protected]…]

THIS NEEDS TO BE RE-OPENED

For me, this fixed IE throwing an error (thank you!) However I also had to go back and update the animate calls that were based on css background-position to use background-position-x and background-position-y for browsers older than 9.

Example: before - $(element).delay(400).animate({'background-position': '-92px 0'},400); after - $(element).delay(400).animate({'background-position-x': '-92px'},400);

I'm not moving on the Y axis so it can stay 0 ( as not specified ).

[dmethvin]

As documented, .animate() has never supported animation of shorthand properties (ones that consist of multiple values separated by spaces).

[anonymous]

I've tried all of this, and none of this works. IE8 (which is the browser of choice from clueless executives apparently) doesn't accept 'background-position-y', or (of course) 'backgroundPositionY'. With a position of 'top center', I can't use a number for my left position.

I need a solution that work with IE. Any suggestions?

[anonymous]

remove the PX