jQuery using height() to get changing height of div

Question

Trying to get the height of a div that is changing in an animation. Once I get that height, I need to display it as a percentage in text h4 tag.

Currently the animation is controlled by the CSS & jQuery. The issue is that when I use height() it only returns the first height of the div and doesn't display the div height as it changes. I think I need to iterate though the height somehow but I'm not sure how to do such. I have it set up to display a console.log on the height currently.

HTML

<div id="brain">
    <div id="brain-image"></div>
    <div id="circle-percent">
        <p class="retention-title">Memory Retention</p>
        <h4 class="brain-percentage">20%</h4>
    </div>
    <div class="water"></div>
</div>

CSS

#brain {
background: #f5f5f5; 
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
width: 713px;
height: 608px;
position: relative;
z-index: 90;
margin-left: 120px;
}
.water {
background-color: #5bbd97;   
background-position: top right;
position: absolute;
bottom: 0px;
width: 713px;
height: 608px;
-webkit-transition: all 10s ease-out;
-moz-transition: all 10s ease-out;
-o-transition: all 10s ease-out;
transition: all 10s ease-out;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#brain-image {
background: url('img/brain.png');
width: 713px;
height: 608px;
display:block;
z-index: 99;
position:absolute;
top:0
}

JAVASCRIPT

 // *** Animation based on scroll ***

 jQuery(document).ready(function ($) {
      jQuery(window).scroll(function() {
                    if (jQuery(window).scrollTop() > 600) {
                    jQuery('.water').css('height','80px');
      }
 });

 // ** Getting the height here **

 jQuery('.water').height(function() {
           var currentWidth = $('.water').height();
           console.log(currentWidth);
       });

  });

Answer 1

The solution I came up with uses jQuery's Animate and Step functions instead of strict CSS transitions. When the Window Scroll Event is fired, and you are a certain amount of distance away from the top, fire off the resize function. This function accepts a jQuery Element and an initial height as displayed in the fiddle. When the animation begins, on each step, the output is displayed as a percentage of the initial height.

https://jsfiddle.net/ko9s44pn/

function resize( el, height )
{
  if (height != 80)
  {
    el.animate({ height: 80 },{ duration: 5000,
      step: function( curheight )
      {
        $('#output').text((curheight / height) * 100 + '%');
      }
    });
  }
}

The use of the step function in animate is the iteration you mentioned you were looking for. This lets you perform certain actions at a given interval of the animation. It's not a perfect solution, but hopefully it'll point you in the right direction!

Answer 2

So, I found an answer. I tried using @Vaune_X answer but I did something different. Hopefully ppl can reference this if they have issues.

<script type="text/javascript"> 
                jQuery(document).ready(function ($) {
                    jQuery(window).scroll(function() {
                        if (jQuery(window).scrollTop() > 600) {
                        jQuery('.water').css('height','80px');
                    }
                    });

                    jQuery('#ringo-difference').click(function () { 
                        jQuery('.water').css('height','608px');

                    });

                    //Brain Animation Vars
                    var waterHeightStart = $('.water').height();
                    var brainPercent = $('.brain-percentage');
                    var aLabel = $('.a-label');
                    var bLabel = $('.b-label');

                    //Polls Water Height to Make Brain Percent
                    setInterval(function(){
                        var waterHeightNow = $('.water').height();
                        var percent = Math.round((waterHeightNow / waterHeightStart)*100);

                        brainPercent.html(percent+'%');
                        textColor(percent);
                    }, 250);

                    //Changes Text Color Based on Brain Percent
                    function textColor(percent){
                        if (percent >= 91) {
                            aLabel.css('color', '#000');
                            bLabel.css('color', '#000');
                        }
                        if (percent <= 90) {
                            aLabel.eq(0).css('color', '#888');
                            aLabel.eq(1).css('color', '#000');
                        }
                        if (percent <= 70) {
                            aLabel.css('color', '#888');
                            bLabel.css('color', '#000');
                        }
                        if (percent <= 50) {
                            aLabel.css('color', '#888');
                            bLabel.eq(0).css('color', '#888');
                            bLabel.eq(1).css('color', '#000');
                            bLabel.eq(2).css('color', '#000');
                            bLabel.eq(3).css('color', '#000');
                        }
                        if (percent <= 40) {
                            aLabel.css('color', '#888');
                            bLabel.eq(0).css('color', '#888');
                            bLabel.eq(1).css('color', '#888');
                            bLabel.eq(2).css('color', '#000');
                            bLabel.eq(3).css('color', '#000');
                        }
                        if (percent <= 25) {
                            aLabel.css('color', '#888');
                            bLabel.eq(0).css('color', '#888');
                            bLabel.eq(1).css('color', '#888');
                            bLabel.eq(2).css('color', '#888');
                            bLabel.eq(3).css('color', '#000');
                        }
                        if (percent <= 12) {
                            aLabel.css('color', '#888');
                            bLabel.css('color', '#888');
                        }

                    };

                });
            </script>