Jquery animate div a la misma posición que otro div

¿Cómo puedo animar un div a la misma posición que otro div?Jquery animate div a la misma posición que otro div

Quiero animar la posición de la izquierda # div1 a la misma posición de la izquierda # div2

Cuando uso .position(). O .offset izquierda(). Dejó para obtener la posición de la izquierda # div2 luego intente animar # div1 a la misma posición, la animación se ejecuta pero mueve # div1 a la misma posición que #div 2 PLUS la posición original de # div1 (es decir, no están alineados).

Aquí hay una versión simplificada del script. Espero que puedas ayudar :)

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

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

Fuente

2010-12-07 user469453

Bueno, supongo que ya estuviste allí. Sin embargo ... el código depende de su diseño real.

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

(Al menos esto funciona en mi navegador)

KR, zara

Fuente

2010-12-07 14:47:09 user533812

Jquery animate div a la misma posición que otro div

Respuesta

Cuestiones relacionadas