Question

所以我有一个动画概念，网站的背景是一个大的正方形网格。加载网站时，方块很小，5vw x 5vw。渐渐地，它们会变得更大，直到它们达到7vw x 7vw，然后它们开始回到5vw。

如果你只是运行它，你会更好地理解这个问题：

var x = $(".x");
var table = $("#background");

animation();

function animation() {
  x.animate({
    height: "7vw"
  }, 2000);
  table.animate({
    borderSpacing: "3vw"
  }, 2000);

  setTimeout(reverse, 2000)
}

function reverse() {
  x.animate({
    height: "5vw"
  }, 2000);
  table.animate({
    borderSpacing: "5vw"
  }, 2000);

  setTimeout(animation, 2000)
}

#background {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  border-spacing: 5vw;
}
.x {
  height: 5vw;
  background: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="background">
  <tr>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
    <td>
      <div class="x"></div>
    </td>
  </tr>
</table>

正如您可能看到的那样，问题在于它不起作用。我真的不确定它在做什么。我认为它是从正方形之间的一个荒谬的空间开始，并且正方形非常小，然后将它们拉近并使它们变大，我不知道为什么。它也是在使它们变大并使它们变小之间交替，而不是使它们变大然后变小。想法，任何人？

Answer 1

问题在于你的table.animate调用。我不是百分之百确定他们想要做什么（做出一些假设），但它是独立于正方形的动画，造成奇怪的外观。

如果你在没有这些电话的情况下这样做，方块会平稳地增长，但不确定它是否是你想要的外观。看到这个jsfiddle：http://jsfiddle.net/0xzvjz04/2/

更改了javascript：

var x = $(".x");
var table = $("#background");

animation();

function animation() {
    x.animate({
        height: "7vw",
        width: "7vw"
    }, 2000);

    setTimeout(reverse, 2000)
}

function reverse() {
    x.animate({
        height: "5vw",
        width: "5vw"
    }, 2000);

    setTimeout(animation, 2000)
}

更改了css：

#background {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    border-spacing: 3vw;
}

.x {
    height: 5vw;
    width: 5vw;
    background: #333333;
}

让广场网格慢慢改变大小

1 个答案: