If statement not working (jQuery)

I'm quite new to jQuery/Javascript and so I'm giving myself little exercises to learn.

I've coded the following, but have found that the if statement does not work.

I'm trying to make something happen if the height of an element ("tube") is below 10.

The elements height ("tube") is effected when it is clicked.

console.log shows me the elements current height, so i know the height's value can be obtained.

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.

Layman's terms would be appreciated!

Thanks again!!

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

$(boob).hide();

$(circle).each(function() {
  $(this).draggable();
});

$(bigCircle).click(function() {
  $(bigCircle).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() )
}); 

});