Jquery animieren div an die gleiche Position wie ein anderes div

Wie kann ich ein Div an die gleiche Position wie ein anderes div animieren.Jquery animieren div an die gleiche Position wie ein anderes div

Ich möchte die linke Position # div1 auf die gleiche linke Position # div2 animieren

Wenn ich .position() verwenden. Links oder .Offset(). Links die linke Position # div2 zu erhalten versuchen Sie dann, # div1 auf die gleiche Position zu animieren, die Animation läuft, aber bewegt #div1 an die gleiche Position wie #div 2 PLUS die ursprüngliche Position von # div1 (dh sie sind nicht ausgerichtet).

Hier ist eine vereinfachte Version des Skripts. Hoffe du kannst helfen :)

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

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

Quelle

2010-12-07 user469453

Nun, ich denke du warst schon da. Allerdings ... hängt der Code von Ihrem tatsächlichen Layout ab.

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

(zumindest das funktioniert in meinem Browser)

kr, zara

Quelle

2010-12-07 14:47:09 user533812

Jquery animieren div an die gleiche Position wie ein anderes div

Antwort

Verwandte Themen