jQuery使用height()来改变div的高度

Question

试图获取动画中变化的 div 的高度。获得该高度后，我需要在文本 h4 标记中将其显示为百分比。

目前动画由 CSS & jQuery 控制。问题是，当我使用 height() 时，它只返回 div 的第一个高度，并且不显示 div 高度的变化。我想我需要以某种方式迭代高度，但我不知道该怎么做。我已将其设置为在当前高度上显示 console.log。

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

我想出的解决方案使用 jQuery 的 Animate 和 Step 函数，而不是严格的 CSS 转换。当 Window Scroll Event 被触发，并且你离顶部有一定距离时，触发 resize 函数。此函数接受 jQuery 元素和小提琴中显示的初始高度。动画开始时，在每一步，输出显示为初始高度的百分比。

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 + '%');
      }
    });
  }
}

在 animate 中使用 step 函数是您提到的您正在寻找的迭代。这使您可以在动画的给定间隔执行某些操作。这不是一个完美的解决方案，但希望它能为您指明正确的方向！

Answer 2

所以，我找到了答案。我尝试使用@Vaune_X 答案，但我做了一些不同的事情。希望大家有问题可以参考。

<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>