jquery animate div与另一个div的位置相同

问题描述：

如何将div创建为与另一个div相同的位置。jquery animate div与另一个div的位置相同

我想＃DIV1的左侧位置，以动画＃DIV2相同左侧位置

当我使用.POSITION（）。向左或.offset（）。左边得到＃DIV2的左侧位置，然后尝试使＃div1动画到相同的位置，动画运行，但它将＃div1移动到与＃div 2相同的位置，即＃div 1的原始位置（即它们不对齐）。

下面是该脚本的简化版本。希望你能帮助:)

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

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

答

嗯，我想你已经在那里了。但是...代码取决于您的实际布局。

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

（至少这部作品在我的浏览器）

KR，ZARA

jquery animate div与另一个div的位置相同

相关推荐