代码之家  ›  专栏  ›  技术社区  ›  vikingosegundo

设置动画时取消设置css参数

  •  6
  • vikingosegundo  · 技术社区  · 16 年前

    我开始学习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);
                        }
                    );
    

    所以我的问题是:

    编辑

    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() (理所当然地)破坏了动画

    还有其他提示吗?

    1 回复  |  直到 16 年前
        1
  •  6
  •   jantimon    16 年前

    要重置这些值,请将其更改为“自动”

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