Question

尝试获取动画中正在变化的div的高度。一旦达到该高度，我需要在文本h4标签中将其显示为百分比。

目前，动画由CSS＆amp; 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时，如果距离顶部有一定距离，则关闭调整大小功能。此函数接受jQuery元素和小提琴中显示的初始高度。动画开始时，在每一步中，输出显示为初始高度的百分比。

https://jsfiddle.net/ko9s44pn/

$stmt->execute();

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

Answer 2

所以，我找到了答案。我尝试使用@Vaune_X答案，但我做了一些不同的事情。如果他们有问题，希望ppl可以参考这个。

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

jQuery使用height（）来改变div的高度

2 个答案: