unset css parameters when animating

jquery

Solution

to reset those values change them to 'auto'

top: auto;
left: auto;
right: 0px;
bottom: 0px;

Edit:

You could add "targets".

 <div id="top" style="position:absolute;left:0;top:0"></div>
 <div id="bottom" style="position:absolute;left:0;top:auto;bottom:0px"></div>

Now you can use the values of your targets for your animation:

$("#bottom").offset().top
$("#bottom").offset().left

Animation:

 $(o).animate({ top : $("#bottom").offset().top, left : $("#bottom").offset().left });

Problem

I started to learn jQuery. I wrote a code, that will cycle the position of an given element by calling functions stored in an array. This works fine for this code: ``` <script type="text/javascript"> $(document).ready(function(){ $('#right_column').css({zIndex:1000, position: 'absolute', right: 0, top:200 }); $('body').css({overflow:'hidden'}); var funcs = new Array( function(o){ $(o).animate({right: 0, top:200}, 1000); }, function(o){ $(o).animate({top: 0},1000); }, function(o){ $(o).animate({right: 300},1000); }, function(o){ $(o).animate({right: 300, top:200},1000); } ); var flip=0; $('#right_column').click(function self(){ funcs[++flip % funcs.length]('#right_column'); }); }); </script> ``` but if I change the positions parameter like this ``` var funcs = new Array( function(o){ $(o).animate({right: 0, top:200}, 1000); }, function(o){ $(o).animate({top: 0},1000); }, function(o){ $(o).animate({left: 0},1000); }, function(o){ $(o).animate({right: 300, bottom:0},1000); } ); ``` it breaks. I assume, that the complementary parameters (top<->bottom; left<->right) interfere, as they would do in plain css as well. So my question is: How can I reset css parameters to undefined? edit `animate` doesn't seem to be able to handle `auto` probably. It didn't change the behavior. with `css()` it works. ``` var funcs = new Array( function(o){ $(o).css({right:0, bottom:0,left:'auto', top:'auto'}) console.log('funcs 0'); }, function(o){ $(o).css({top:0, right:0, left:'auto', bottom:'auto'}) console.log('funcs 1'); }, function(o){ $(o).css({left:0, top:0, right:'auto', bottom:'auto'}) console.log('funcs 2'); }, function(o){ $(o).css({right:'auto', top:'auto',left:0, bottom:0}) console.log('funcs 3'); } ); ``` running `css({...:'auto'})` before/after `animate()` destroyed (of cause) the animation any other hint?

Original source