Jquery animate div başka bir div ile aynı konuma

Bir divı başka bir div ile aynı konuma nasıl canlandırabilirim?Jquery animate div başka bir div ile aynı konuma

ben .position kullandığınızda(). Sol VEYA .offset(). # DIV2 sol pozisyon almak için sol

# DIV2 aynı sol pozisyona # div1 sol konumuna animasyon istiyorum daha sonra # div1'i aynı konuma hareket ettirmeye çalışın, animasyon çalışır ancak # div1'i # div1 ile aynı konuma getirerek # div1'in orijinal konumuna getirin (yani hizalanmaz).

İşte betiğin basitleştirilmiş bir sürümü. yardımcı Umut :)

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

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

kaynak

2010-12-07 user469453

Eh, orada zaten sanırım. Ancak ... kod, gerçek düzeninize bağlı.

<!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 (En azından bu benim tarayıcıda çalışır) zara

kaynak

2010-12-07 14:47:09 user533812

Jquery animate div başka bir div ile aynı konuma

cevap

İlgili konular