JQuery анимирует div в ту же позицию, что и другой div

Question

JQuery анимирует div в ту же позицию, что и другой div

Как я могу оживить div в той же позиции, что и другой div.

Я хочу анимировать левую позицию #div1 в ту же левую позицию #div2

Когда я использую.position(). Left OR .offset(). Left, чтобы получить левую позицию #div2, затем пытаюсь анимировать #div1 в той же позиции, анимация запускается, но она перемещает #div1 в ту же позицию, что и #div 2 PLUS исходная позиция #div1 (т.е. они не выровнены).

Вот упрощенная версия скрипта. Надеюсь, вы можете помочь:)

   <script> 
   $(function({
     var end = $(#div2).position().left;
     $(#div1).animate({"left": end.left}, "slow");
    });
   </script>

  <html>
  <div id="div1"></div>
  <div id="div2"></div>
  </html>

5

jquery position jquery-animate offset

Источник

user469453 07 дек '10 в 11:52

1 ответ

Решение

Другие вопросы по тегам jquery position jquery-animate offset

user533812 07 дек '10 в 14:47 2010-12-07 14:47 · Accepted Answer · 2010-12-07 14:47

Ну, я думаю, ты уже был там. Однако... код зависит от вашего фактического макета.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body, td, input, button{
                font-family: Tahoma,Verdana,Helvetica,Arial,sans-serif !important;
                font-size:11px;
            }
            label{
                width:100px;
                display: inline-blocK;
            }
            #div1{
                width:100px;
                height:50px;
                background-color:red;
                position:absolute;
                top:100px;
                left:30px;
            }
            #div2{
                width:80px;
                height:30px;
                background-color:green;
                position:absolute;
                top:200px;
                left:100px;
            }

        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#moveitButton").click(function() {
                    doit();
                })

            });

            function doit() {
                var div2Pos = $("#div2").position();
                var div2Width = $("#div2").css("width");
                var div2Height = $("#div2").css("height");
                $("#div1").animate({left:div2Pos.left, width:div2Width, height:div2Height}, 1000);          
            }
        </script>
    </head>
    <body>

        <div id="div1">div #1</div>
        <div id="div2">div #2</div>
        <button id="moveitButton">move it!</button>
    </body>
</html>

(По крайней мере, это работает в моем браузере)

кр, зара