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

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

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

Lorsque j'utilise .position().de gauche OU de .offset().gauche pour obtenir la position la plus à gauche de #div2 puis essayez d'animer #div1 à la même position, l'animation s'exécute, mais il se déplace #div1 de la même position que l'erreur #div 2 PLUS la position originale de #div1 (c'est à dire qu'ils ne sont pas alignés).

Voici une version simplifiée de ce script. J'espère 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>

OriginalL'auteur user469453 | 2010-12-07

  1. 4

    Bien, je suppose que vous y étiez déjà. Cependant... le code est en fonction de votre mise en page.

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

    OriginalL'auteur user533812