Jquery anime div à la même position qu'un autre div

Comment puis-je animer un div à la même position qu'un autre div.Jquery anime div à la même position qu'un autre div

Je veux animer la position gauche de # div1 à la même position gauche de # div2

Lorsque j'utilise .Position(). Gauche ou .Offset(). Gauche pour obtenir la position gauche de # div2 puis essayez d'animer # div1 à la même position, l'animation s'exécute mais elle déplace # div1 à la même position que #div 2 PLUS la position d'origine de # div1 (ie ils ne sont pas alignés).

Voici une version simplifiée du script. Espérons que vous pouvez aider :)

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

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

Source

2010-12-07 user469453

Eh bien, je suppose que vous étiez déjà là. Cependant ... le code dépend de votre disposition réelle.

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

(au moins cela fonctionne dans mon navigateur)

kr, zara

Source

2010-12-07 14:47:09 user533812

Jquery anime div à la même position qu'un autre div

Répondre

Questions connexes