アニメーション化時にCSSのパラメータが設定されていない

Question

jQueryを学び始めました。私は配列に格納された関数を呼び出すことによって、与えられた要素の位置を循環させるコードを書いた。

<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> 

が、私はこの

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); 
        } 
       ); 

のような位置パラメータを変更した場合、それは壊れる：これは、このコードのために正常に動作します。

私は、補完的なパラメータ（上の< - >下、左< - >右）が干渉することを前提としています。

私の質問はです。どうすればcssパラメータをundefinedにリセットできますか？

animate

編集はおそらくautoを処理することができていないようです。それは行動を変えなかった。 とcss()が動作します。 animate()後アニメーション

その他のヒント（原因の）破壊前/

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'})を実行していますか？あなたは "ターゲット" を追加することができ

：これらの値をリセットする

Answer 1

は編集

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

'自動' にそれらを変更します。

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

今すぐあなたのアニメーションのためのあなたの目標の値を使用することができます。

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

アニメーション：非常に簡単

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