using jQuery animate to animate a div from right to left

Question

I have a div absolutely positioned at top  0px and right  0px  and I would like to use jquery s  animate   to animate it from it s current position to left  0px  How does one do this  I can t seem to get this to work       coolDiv   animate   left   0px     slow      Why doesn t this work and how does one accomplish what I am looking to do   Thanks

User · Answer

This worked for me      div   css   left   2000px    animate   left   0px     slow

User · Answer

I think the reason it doesn t work has something to do with the fact that you have the right position set  but not the left   If you manually set the left to the current position  it seems to go   Live example  http   jsfiddle net XqqtN   var left       coolDiv   offset   left      Get the calculated left position      coolDiv   css  left left       Set the left to its calculated position               animate   left   0px     slow        EDIT   Appears as though Firefox behaves as expected because its calculated left position is available as the correct value in pixels  whereas Webkit based browsers  and apparently IE  return a value of auto for the left position   Because auto is not a starting position for an animation  the animation effectively runs from 0 to 0  Not very interesting to watch    o   Setting the left position manually before the animate as above fixes the issue     If you don t like cluttering the landscape with variables  here s a nice version of the same thing that obviates the need for a variable       coolDiv   css  left   function    return   this  offset   left                   animate   left   0px     slow

User · Answer

Here s a minimal answer that shows your example working    lt html gt   lt head gt   lt title gt hello world animate   lt  title gt   lt script src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery min js      type  text javascript  gt  lt  script gt   lt style type  text css  gt   coolDiv       position  absolute      top  0      right  0      width  200px      background-color   ccc     lt  style gt   lt script type  text javascript  gt    document  ready function            this way works fine for Firefox  but         Chrome and Safari can t do it          coolDiv   animate   left  0    slow           So basically if you  start  with a right position        then stick to animating to another right position        to do that  get the window width minus the width of your div      coolDiv   animate   right      body   innerWidth  -    coolDiv   width       slow           sorry that s so ugly       lt  script gt   lt  head gt   lt body gt       lt div style    id  coolDiv  gt HELLO lt  div gt   lt  body gt   lt  html gt      Original Answer   You have       coolDiv   animate   left   0px    slow      Corrected       coolDiv   animate   left   0px     slow      Documentation  http   api jquery com animate

User · Answer

so the  animate method works only if you have given a position attribute to an element  if not it didn t move   for example i ve seen that if i declare the div but i declare nothing in the css  it does not assume his default position and it does not move it into the page  even if i declare property margin  x w y z

User · Answer

If you know the width of the child element you are animating  you can use and animate a margin offset as well  For example  this will animate from left 0 to right 0  CSS    parent  width 100   position relative      itemToMove  position absolute  width 150px  right 100   margin-right -150px      Javascript        itemToMove    animate    margin-right    0    right    0     1000

[jquery] using jQuery .animate to animate a div from right to left?

Examples related to jquery

Examples related to jquery-animate