Tengo tres divs en un contenedor uno al lado del otro y estoy tratando de hacer que cambien sus posiciones haciendo clic en ellos. Me gustaría poder, por ejemplo, hacer clic en el div izquierdo y moverlo a la posición central. Esto es lo que tengo hasta ahora. Tengo un div animando (eliminé los otros dos div ya que no pude animarlos).
HTML
var checker = true; $("#div1").click(function () { targetLeft = checker ? "10%" : "30%"; $(this).animate({left: targetLeft},400); checker ? checker = false : checker = true; }); #contentdiv { background-color: grey; border:1px solid black; height:150px; width:500px; } #div1 { background-color: purple; height:100px; width:100px; position:absolute; display: inline-block; left:30%; border-radius: 12px; } <div id="contentdiv"> <div id="div1">div1</div> </div>Gracias por cualquier ayuda que pueda proporcionar. Muy apreciado :)
Tienes la documentación en línea con un ejemplo para animate() .
var checker = true; $("#div1").click(function () { targetLeft = checker ? "10%" : "30%"; $(this).animate({left: targetLeft},400); checker ? checker = false : checker = true; }); $("#div2").click(function () { let checkTop = !$(this).hasClass('div2active') ? "50%" : $("#contentdiv").offset().top + 'px'; let checkLeft = !$(this).hasClass('div2active') ? "50%" : "40%"; $(this).animate({ left: checkLeft, top: checkTop },400).toggleClass('div2active'); }); #contentdiv { background-color: grey; border:1px solid black; height:500px; width:100%; } .divs { height:100px; width:100px; position:absolute; display: inline-block; border-radius: 12px; } #div1 { background-color: purple; left:30%; } #div2 { background-color: teal; left:40%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="contentdiv"> <div id="div1" class="divs">div1</div> <div id="div2" class="divs">div2</div> </div>