Unset css options for animation

Question

I started learning jQuery. I wrote code that will cyclically move the position of this element, calling the functions stored in the 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 a position 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); } ); 

he breaks down.

I assume that additional parameters (top ↔ bottom; left ↔ right) interfere, as in regular css.

So my question is: How can I reset CSS options for undefined?

change

animate can't seem to handle auto . This has not changed 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'); } ); 

css({...:'auto'}) works css({...:'auto'}) before / after animate() destroyed (due to) animation

any other hint?

Answer 1

before reset, these values ​​change them to "auto"

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

Edit:

You can add "goals".

  <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 goals for your animation:

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

Animation:

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