jQuery - animating div with if statement not working

What I am trying to accomplish is a simple div animation, where the div expands for 200px each time someone clicks on it. I have created a variable sizeCounter, which would grow for 200 each time the div is clicked. When the sizeCounter reaches 700, I want the div to change it's background-color property to green. However, it's not working. What is wrong with my code?

$(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="http://ift.tt/1oMJErh"></script>
<div class="box">
  <p class="text">Click me!</p>
</div>