交换多个div，因此一个类在所有元素下面，另一个类具有可见动画。

Question

我在一个页面上有多个div，它们有不同的类，名为position-1、position-2和position-3。

​

.position-1 {
  background-color: red;
}
.position-2 {
  background-color: lightblue;
}
.position-3 {
  background-color: yellow;
}
.position-4 {
  background-color: lightgreen;
}

<div class="position-1">
  <p>this div has the class position-1.</p>
</div>
<div class="position-3">
  <p>this div has the class position-3.</p>
</div>
<div class="position-2">
  <p>this div has the class position-2.</p>
</div>
<div class="position-4">
  <p>this div has the class position-4.</p>
</div>
<div class="position-2">
  <p>this div has the class position-2.</p>
</div>
<div class="position-3">
  <p>
    this div has the class position-3.</p>
</div>
<div class="position-1">
  <p>
    this div has the class position-1.</p>
</div>
<div class="position-4">
  <p>this div has the class position-4.</p>
</div>

​

小提琴手。

我想要能够视觉动画的八个div，以便命名的位置-1是首先，然后位置-2，然后位置3，等等，当用户按下按钮。我不介意使用jquery。我对动画非常陌生，所以我不知道如何开始。

编辑:一个函数最有用

Answer 1

您可以将其分组到一个父类下，对数组进行排序，然后使用jquery.animate函数对其进行动画化。

我还将div.position-N CSS位置更改为绝对

'top' : i * 30为20 is高度+10 is底部边缘。

​

var anim = $('.animation > div');

// set default position
$.each(anim, function(i,e) {
    $(this).css('top',i * 30);
});

$('#clickme').click(animateDiv);

function animateDiv() {

    anim.sort(function (a, b) {     
        if (a.className > b.className) {
            return 1;
        }
        if (a.className < b.className) {
            return -1;
        }
        return 0;
    });

    $.each(anim, function(i,e) {
        $(e).animate({
            'top' : i * 30
        },1500); // duration
    });

}

.animation {
  position: relative;
}
.animation > div {
  position: absolute;
  width: 100%;
  height: 20px;
  top: 0;
}
.animation p {
  margin: 0;
}
.position-1 {
  background-color:red;
  top: 0;
}
.position-2 {
  background-color:lightblue;
}
.position-3 {
  background-color:yellow;
}
.position-4 {
  background-color:lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="button" id="clickme" value="Click Me" />
<div class="animation">
  <div class="position-4">
    <p>this div has the class position-4.</p>
  </div>
  <div class="position-3">
    <p>this div has the class position-3.</p>
  </div>
  <div class="position-3">
    <p>
      this div has the class position-3.</p>
  </div>
  <div class="position-1">
    <p>
      this div has the class position-1.</p>
  </div>
  <div class="position-4">
    <p>this div has the class position-4.</p>
  </div>
  <div class="position-1">
    <p>this div has the class position-1.</p>
  </div>
  <div class="position-3">
    <p>this div has the class position-3.</p>
  </div>
  <div class="position-2">
    <p>this div has the class position-2.</p>
  </div>
  <div class="position-4">
    <p>this div has the class position-4.</p>
  </div>
  <div class="position-2">
    <p>this div has the class position-2.</p>
  </div>
  <div class="position-3">
    <p>
      this div has the class position-3.</p>
  </div>
  <div class="position-1">
    <p>
      this div has the class position-1.</p>
  </div>
  <div class="position-4">
    <p>this div has the class position-4.</p>
  </div>
</div>

​