[英]jQuery using height() to get changing height of div
Trying to get the height of a div that is changing in an animation. 尝试获取在动画中变化的div的高度。 Once I get that height, I need to display it as a percentage in text h4 tag.
达到该高度后,需要在文本h4标签中将其显示为百分比。
Currently the animation is controlled by the CSS & jQuery. 目前,动画是由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.
问题是,当我使用height()时,它仅返回div的第一个高度,并且在更改时不显示div的高度。 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.
我已将其设置为在当前高度上显示console.log。
HTML 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 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 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);
});
});
The solution I came up with uses jQuery's Animate and Step functions instead of strict CSS transitions. 我想出的解决方案使用jQuery的Animate和Step函数,而不是严格的CSS过渡。 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.
此函数接受jQuery元素和小提琴中显示的初始高度。 When the animation begins, on each step, the output is displayed as a percentage of the initial height.
动画开始时,在每个步骤上,输出都将显示为初始高度的百分比。
https://jsfiddle.net/ko9s44pn/ 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. 在动画中使用step函数是您所要查找的迭代。 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!
这不是一个完美的解决方案,但希望它将为您指明正确的方向!
So, I found an answer. 因此,我找到了答案。 I tried using @Vaune_X answer but I did something different.
我尝试使用@Vaune_X答案,但是做了一些不同的事情。 Hopefully ppl can reference this if they have issues.
如果他们有问题,希望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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.