I have three divs in a container next to each other and I'm trying to get them to change their positions by clicking them. I'd like to be able to, for example, click on the left div and have it move to the center position. Here is what I have so far. I have one div animating(I removed the other two divs since I couldn't get them to animate).
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>Thank you for any help you can provide. Much appreciated :)
You have the documentation online with exemple for 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>