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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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--  gt   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

User · Answer

You can also use math combination  -   to move background    this  animate   backgroundPositionX   - 20px    500

[jquery] jquery animate background position

Animation Properties and Values

Examples related to jquery

Examples related to jquery-animate

Examples related to background-position