unset css parameters when animating
<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>
