动画点击 div

Question

我有 3 个 div，其中 "left"、"active" 和 "right" 看起来像这样：

...现在，每当我单击左侧 div 时，它就会动画并变为活动状态，并且活动的那个会占据它的位置，我需要它对右侧 div 也做同样的事情.基本上，我需要一种方法让 div 在有人点击它们后变得活跃，而前一个活跃 div 将其置于左侧或右侧 div 取决于点击哪个.

为此，我还想更改 class 名称，以便当您单击左侧 div 时，它会在中心显示动画，我尝试添加 $(this).removeClass('left').addClass('active'); 和其他方式围绕活动 div 但它没有用，它没有在它们之间切换 classes。

这是我目前所拥有的 JSFIDDLE

Answer 1

您不需要不同的 classes，您可以只使用一个 class box 并使用 CSS 的 :last-of-type 和:nth-of-type() 个选择器。

在 jQuery 中，您可以根据 left 值对 div 进行动画处理。

Updated Fiddle

$('.box').click(function() {
  if ($(this).css('left') != '125px') {
    var l = ($(this).css('left') == '0px') ? 0 : 400;
    $(this).animate({
      width: 250,
      height: 250,
      left: 125,
      top: 0,
      opacity: 1
    }, 400);
    $('.active').animate({
      width: 100,
      height: 100,
      left: l,
      top: 75,
      opacity: 0.3
    }, 400);
    $('#header > .box').removeClass('active');
    $(this).addClass('active');
  }
});

#header {
  list-style: none;
  width: 500px;
  height: 250px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ebebeb;
}
.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 75px;
  background: black;
  opacity: 0.3;
}
.box:nth-of-type(2) {
  width: 250px;
  height: 250px;
  top: 0;
  left: 125px;
  opacity: 1;
}
.box:last-of-type {
  left: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
  <div class="box"></div>
  <div class="box active"></div>
  <div class="box"></div>
</div>

动画点击 div

Animate clicked div

jquery

css

jquery-animate