How to check element height after calling jQuery animate
<p>I've coded the following, but have found that the height check statement does not work as expected.</p>

<p>I'm trying to make something happen if the height of an element <code>#tube</code> is below 10. </p>

<p>The elements height <code>#tube</code> is affected when it is clicked. <code>console.log</code> shows me the elements current height, so i know the height's value can be obtained. </p>

<p>But for some reason it's just not working - it may be due to poor jQuery grammar (not sure what the term should be)  would really appreciate any help.</p>

<pre><code>$(document).ready(function() {
  var $circle = $(".circle"),
    $tube = $("#tube"),
    $boob = $("#boob"),
    $bigCircle = $("#bigCircle"),
    tubeMinHeight = 10;

  $boob.hide();
  $circle.draggable();
  $bigCircle.click(function() {
    $(this).effect("shake", "slow");
    $("body").jGravity({
       target: ".circle",
       ignoreClass: "#bigCircle",
       weight: 25,
       depth: 1,
       drag: true
    });
  });

  $tube.droppable({
    drop: function(event, ui) {
      ui.draggable.hide(200);
      $tube.animate({
        height: "+=10"
      }, 'slow', 'easeOutBounce');
      $tube.click(function() {
        $tube.animate({
          height: "-=10"
        }, 'fast', 'easeOutBounce');

        /* if statement below in question! */
        if ( $tube.height() === 0 ) {
           $boob.show(100);
           console.log("working");
        }
      });
    }
  });

  $("#button").click(function(){
     console.log( $tube.height() );
  }); 
});
</code></pre>

<p>I'm quite new to jQuery/Javascript and so I'm giving myself little exercises to learn. Layman's terms would be appreciated!</p>

<p>Here's a link to the exercise - <a href="http://codepen.io/ianranasinghe/pen/XdpZNN" rel="nofollow">http://codepen.io/ianranasinghe/pen/XdpZNN</a>?</p>