Animate点击了div

Question

我有3个div "left"，"active"和"right"，如下所示：

...现在，每当我点击左侧div时，它会动画并变为活动状态，而活动状态会占据它的位置，我也需要它来为正确的div做同样的事情。基本上我需要一种方法，在有人点击它们之后使得旁边div变为活动状态，并且前一个活动div将其作为左或右div放置，具体取决于单击哪一个。

为此，我还想更改类名，这样当你点击左侧div时，它会在中心设置动画，我尝试添加$(this).removeClass('left').addClass('active');，而另一种方式为活动div，但它没有＆＃39在工作中，它没有在它们之间切换类。

这是我到目前为止JSFIDDLE

Answer 1

您不需要不同的课程，您可以使用一个课程box并使用CSS :last-of-type和:nth-of-type()选择器设置它们的样式。

在jQuery中，您可以根据div值为left设置动画。

的 Updated Fiddle

＆＃13;

＆＃13;

$('.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');
  }
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;