if语句不起作用动画div

Question

我想要完成的是一个简单的div动画，每当有人点击它时div就会扩展200px。我创建了一个变量sizeCounter，每次单击div时它会增加200。当sizeCounter达到700时，我希望div将其background-color属性更改为绿色。但是，它不起作用。我的代码出了什么问题？

$(document).ready(function() {
  var sizeCounter = 100;

  $(".box").click(function() {
    $(".box").animate({
      height: "+=200px",
      width: "+=200px"
    }, 1000);

    sizeCounter += 200;

    $(".text").animate({
      opacity: "0.5",
      top: "+=60px"
    });
  });

  if (sizeCounter === 700) {
    $(".box").click(function() {
      $(".box").css({
        "background-color": "green"
      });
    });
  }
});

.box {
  height: 100px;
  width: 100px;
  background-color: darkblue;
  position: relative;
}

.text {
  color: #fff;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p class="text">Click me!</p>
</div>

Answer 1

问题是，您的if语句仅在页面加载时执行一次且div仅为100px宽度。

要解决此问题，您需要检查animate()回调中的宽度，以便检测宽度变化。试试这个：

＆＃13;

＆＃13;

$(document).ready(function() {
  var sizeCounter = 100;

  $(".box").click(function() {
    $(".box").animate({
      height: "+=200px",
      width: "+=200px"
    }, 1000, function() {
      sizeCounter += 200;
      if (sizeCounter === 700) {
        $(".box").click(function() {
          $(".box").css({
            "background-color": "green"
          });
        });
      }
    });

    $(".text").animate({
      opacity: "0.5",
      top: "+=60px"
    });
  });
});

＆＃13;

.box {
  height: 100px;
  width: 100px;
  background-color: darkblue;
  position: relative;
}

.text {
  color: #fff;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p class="text">Click me!</p>
</div>

＆＃13;

＆＃13;

＆＃13;