Unset CSS-Parameter beim Animieren

Question

Ich fing an, jQuery zu lernen. Ich habe einen Code geschrieben, der die Position eines gegebenen Elements durch Aufruf von in einem Array gespeicherten Funktionen zyklisiert. Dies funktioniert für diesen Code in Ordnung:

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

aber wenn ich die Positionen Parameter wie diese

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

es bricht ändern.

Ich nehme an, dass die komplementären Parameter (oben < -> unten; links < -> rechts) stören, wie sie auch in einfachem css tun würden.

Also meine Frage ist: Wie kann ich CSS-Parameter auf undefined zurücksetzen?

bearbeiten

animate scheint nicht der Lage sein, auto wahrscheinlich zu behandeln. Es hat das Verhalten nicht verändert. mit css() funktioniert es.

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

laufen css({...:'auto'}) vor/nach animate() zerstört (Ursache) die Animation

anderer Hinweis?

Answer 1

diese Werte ändern, um sie zu 'auto' zurücksetzen

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

Edit:

Sie könnten "Ziele" hinzufügen.

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

Jetzt können Sie die Werte Ihrer Ziele für die Animation verwenden:

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

Animation:

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