title: unset css parameters when animating
body: <p>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:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(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');
      });
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>but if I change the positions parameter like this</p>
  
  <pre><code>    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);
                      }
                  );
  </code></pre>
  
  <p>it breaks.</p>
  
  <p>I assume, that the complementary parameters (top&lt;->bottom; left&lt;->right) interfere, as they would do in plain css as well.</p>
  
  <p>So my question is: <strong>How can I reset css parameters to undefined?</strong></p>
  
  <p><strong>edit</strong></p>
  
  <p><code>animate</code> doesn't seem to be able to handle <code>auto</code> probably. It didn't change the behavior.
  with <code>css()</code> it works.</p>
  
  <pre><code>    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');
                      }   
                  );
  </code></pre>
  
  <p>running <code>css({...:'auto'})</code> before/after <code>animate()</code> destroyed (of cause) the animation</p>
  
  <p><strong>any other hint?</strong></p>