单击时将 div 移动到新位置

Question

我在一个容器中有三个 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

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

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

单击时将 div 移动到新位置

Moving divs on click to new position

html

javascript

css

jquery

jquery-animate