单击时将 div 移动到新位置答案

【问题标题】：Moving divs on click to new position单击时将 div 移动到新位置
【发布时间】：2022-01-29 02:21:29
【问题描述】：

我在一个容器中有三个相邻的 div，我试图通过单击它们来改变它们的位置。例如，我希望能够单击左侧 div 并将其移动到中心位置。这是我到目前为止所拥有的。我有一个 div 动画（我删除了另外两个 div，因为我无法让它们动画）。

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>

JSFIDDLE

感谢您提供的任何帮助。非常感谢:)

【问题讨论】：

animate() 可以有多个参数。像这样，您可以将您的 div 移动到您想要的位置。
举个例子会很有帮助（我有点 jquery n00b :D ）
你看到我的回答了吗？
@SKJ 我刚看到。谢谢！我投票给你的答案是正确的:)

标签： javascript html jquery css jquery-animate

【解决方案1】：

您有在线文档，例如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>

【讨论】：