сбросить параметры 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.

Итак, мой вопрос: Как я могу сбросить параметры CSS на неопределенные?

редактировать

animate, кажется, не в состоянии справиться с auto, вероятно. Это не изменило поведение. с css() работает.

    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'}) до / после animate() уничтожает (по причине) анимацию

любой другой намек?

Answer 1

для сброса этих значений измените их на 'auto'

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

Edit:

Вы можете добавить «цели».

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