Javascript：多次点击会降低高度？
尝试设置下拉菜单的动画，成功了。但是，如果我一直点击它，元素的高度会降低——最终变成0px！！。。不知道为什么会这样 HeightChangePersist--增加高度的函数（通过步骤--工作正常） 当你点击Javascript：多次点击会降低高度？,javascript,height,Javascript,Height,尝试设置下拉菜单的动画，成功了。但是，如果我一直点击它，元素的高度会降低——最终变成0px！！。。不知道为什么会这样 HeightChangePersist--增加高度的函数（通过步骤--工作正常） 当你点击点击这里，第一次就可以了，但点击次数越多，高度就会逐渐降低（逐渐降低）——出乎意料和不想要的——请告诉我哪里出了问题 请帮助，javascript初学者 这是密码-- .盒子{ 宽度：300px； 溢出：隐藏； 背景：rgba（0,0,0,5）； 颜色：白色； 边缘顶部：2倍； } .隐藏
点击这里，第一次就可以了，但点击次数越多，高度就会逐渐降低（逐渐降低）——出乎意料和不想要的——请告诉我哪里出了问题
请帮助，javascript初学者
这是密码--
.盒子{
宽度：300px；
溢出：隐藏；
背景：rgba（0,0,0,5）；
颜色：白色；
边缘顶部：2倍；
}
.隐藏{
显示：无；
}
功能高度变化（元素、起始高度、结束高度、步长、间隔、功率）{
if（elem.heightchangepsist）window.clearInterval（elem.heightchangepsist）；
var currStep=0；
elem.heightChangePersist=window.setInterval(
函数（）{
elem.currHeight=easeInOut（起始高度、结束高度、台阶、currStep、功率）；
元素样式高度=元素当前高度+px；
currStep++；
if（currStep>steps）window.clearInterval（元素高度变化持续）；
}
，间隔时间）
}
函数easeInOut（minValue、maxValue、totalSteps、currStep、powr）{
var delta=最大值-最小值；
var stepp=最小值+（数学功率（（（1/totalSteps）*currStep），功率）*增量）；
返回Math.ceil（stepp）；
}
函数调用（）{
var box1=document.getElementById（'box1'）；
var box2=document.getElementById（'box2'）；
box1.style.display='block'；
box2.style.display='block'；
高度变化持续（框1,0，框1.离光，30,30,5）；
高度变化持续（框2,0，框2.离光，30,30,5）；
}
点击这里！！
这是一个测试，用来检查一个特定项目的动画。希望它能工作，我希望能在这个测试中获得成功。。！！
这是一个用于检查特定动画的测试
项目。希望它能工作，我希望在这次试验中获得成功。。！！这是一个测试
检查一个特定项目的动画。希望它能工作，我希望在这次试验中取得成功
..!!这是一个测试，用来检查一个特定项目的动画。希望它能工作
我希望这次试验能成功。。！！
heightChangePersist——这是我从中得到的，因为在上一个heightChangePersist尚未完成时，您再次调用了heightChangePersist函数
我修改了您的代码，问题解决了：
<html>
<style type="text/css">
.box{
width: 300px;
overflow: hidden;
background: rgba(0,0,0,.5);
color: black;
margin-top: 2px;
}
.hide{
display: none;
}
</style>
<script type="text/javascript" >
function heightChangePersist(elem,startHeight,endHeight,steps,intervals,powr) {
if (elem.heightChangePersist) window.clearInterval(elem.heightChangePersist);
var currStep = 0;
completeFlag++;
elem.heightChangePersist = window.setInterval(
function() {
elem.currHeight = easeInOut(startHeight,endHeight,steps,currStep,powr);
elem.style.height = elem.currHeight+"px";
currStep++;
if (currStep > steps){
window.clearInterval(elem.heightChangePersist);
completeFlag--;
}
}
,intervals)
}
function easeInOut(minValue,maxValue,totalSteps,currStep,powr) {
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalSteps)*currStep),powr)*delta);
return Math.ceil(stepp);
}
var completeFlag = 0;
function invoke(){
if(completeFlag==0){
var box1=document. getElementById('box1');
var box2=document. getElementById('box2');
box1.style.display='block';
box2.style.display='block';
heightChangePersist(box1,0,box1.offsetHeight,30,30,.5);
heightChangePersist(box2,0,box2.offsetHeight,30,30,.5);
}
}
</script>
<div class="box" onclick="invoke()">
click Here!!
</div>
<div id="box2" class="box hide">
This is a test done to check the animation of a particular item.Hoping it works and i hope to be successful in this trial..!!
</div>
<div id="box1" class="box hide">
This is a test done to check the animation of a particular
item.Hoping it works and i hope to be successful in this trial..!!This is a test done
to check the animation of a particular item.Hoping it works and i hope to be successful in this trial
..!!This is a test done to check the animation of a particular item.Hoping it works
and i hope to be successful in this trial..!!
</div>
.盒子{
宽度：300px；
溢出：隐藏；
背景：rgba（0,0,0,5）；
颜色：黑色；
边缘顶部：2倍；
}
.隐藏{
显示：无；
}
功能高度变化（元素、起始高度、结束高度、步长、间隔、功率）{
if（elem.heightchangepsist）window.clearInterval（elem.heightchangepsist）；
var currStep=0；
completeFlag++；
elem.heightChangePersist=window.setInterval(
函数（）{
elem.currHeight=easeInOut（起始高度、结束高度、台阶、currStep、功率）；
元素样式高度=元素当前高度+px；
currStep++；
如果（当前步骤>步骤）{
窗口清除间隔（元素高度变化持续）；
完全滞后--；
}
}
，间隔时间）
}
函数easeInOut（minValue、maxValue、totalSteps、currStep、powr）{
var delta=最大值-最小值；
var stepp=最小值+（数学功率（（（1/totalSteps）*currStep），功率）*增量）；
返回Math.ceil（stepp）；
}
var completeFlag=0；
函数调用（）{
如果（completeFlag==0）{
var box1=document.getElementById（'box1'）；
var box2=document.getElementById（'box2'）；
box1.style.display='block'；
box2.style.display='block'；
高度变化持续（框1,0，框1.离光，30,30,5）；
高度变化持续（框2,0，框2.离光，30,30,5）；
}
}
点击这里！！
这是一个测试，用来检查一个特定项目的动画。希望它能工作，我希望能在这个测试中获得成功。。！！
这是一个用于检查特定动画的测试
项目。希望它能工作，我希望在这次试验中获得成功。。！！这是一个测试
检查一个特定项目的动画。希望它能工作，我希望在这次试验中取得成功
..!!这是一个测试，用来检查一个特定项目的动画。希望它能工作
我希望这次试验能成功。。！！
请注意completeFlag。这是因为它会在您每次单击“click me”时调用事件调用。因此它无法完成间隔，然后是动画。
如果在开始动画之前禁用它，并在动画结束后重新启用它，则它将正常工作：）
.盒子{
宽度：300px；
溢出：隐藏；
背景：rgba（0,0,0,5）；
颜色：白色；
边缘顶部：2倍；
}
.隐藏{
显示：无；
}
功能高度变化（元素、起始高度、结束高度、步长、间隔、功率）{
if（elem.heightchangepsist）window.clearInterval（elem.heightchangepsist）；
var currStep=0；
var a=document.getElementById（'button'）；
a、 onclick=null；
elem.heightChangePersist=window.setInterval(
函数（）{
elem.currHeight=easeInOut（起始高度、结束高度、台阶、currStep、功率）；
元素样式高度=元素当前高度+px；
currStep++；
如果（当前步骤>步骤）{
窗口清除间隔（元素高度变化持续）；
a、 onclick=函数onclick（事件）{invoke（）}；
}
}
，间隔时间）
;
}
函数easeInOut（minValue、maxValue、totalSteps、currStep、powr）{
var delta=最大值-最小值；
var stepp=最小值+（数学功率（（（1/totalSteps）*currStep），功率）*增量）；
返回Math.ceil（stepp）；
}
函数调用（）{
var box1=document.getElementById（'box1'）；
var box2=document.getElementById（'box2'）；
box1.style.display='block'；
box2.style.display='block'；
高度变化持续（框1,0，框1.离光，30,30,5）；
高度变化持续（框2,0，框2.离光，30,30,5）；
}
点击这里！！
这是一个用于检查特定项目动画的测试。H
<html>
<style type="text/css">
.box{
width: 300px;
overflow: hidden;
background: rgba(0,0,0,.5);
color: black;
margin-top: 2px;
}
.hide{
display: none;
}
</style>
<script type="text/javascript" >
function heightChangePersist(elem,startHeight,endHeight,steps,intervals,powr) {
if (elem.heightChangePersist) window.clearInterval(elem.heightChangePersist);
var currStep = 0;
completeFlag++;
elem.heightChangePersist = window.setInterval(
function() {
elem.currHeight = easeInOut(startHeight,endHeight,steps,currStep,powr);
elem.style.height = elem.currHeight+"px";
currStep++;
if (currStep > steps){
window.clearInterval(elem.heightChangePersist);
completeFlag--;
}
}
,intervals)
}
function easeInOut(minValue,maxValue,totalSteps,currStep,powr) {
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalSteps)*currStep),powr)*delta);
return Math.ceil(stepp);
}
var completeFlag = 0;
function invoke(){
if(completeFlag==0){
var box1=document. getElementById('box1');
var box2=document. getElementById('box2');
box1.style.display='block';
box2.style.display='block';
heightChangePersist(box1,0,box1.offsetHeight,30,30,.5);
heightChangePersist(box2,0,box2.offsetHeight,30,30,.5);
}
}
</script>
<div class="box" onclick="invoke()">
click Here!!
</div>
<div id="box2" class="box hide">
This is a test done to check the animation of a particular item.Hoping it works and i hope to be successful in this trial..!!
</div>
<div id="box1" class="box hide">
This is a test done to check the animation of a particular
item.Hoping it works and i hope to be successful in this trial..!!This is a test done
to check the animation of a particular item.Hoping it works and i hope to be successful in this trial
..!!This is a test done to check the animation of a particular item.Hoping it works
and i hope to be successful in this trial..!!
</div>
<html>
<style type="text/css">
.box{
width: 300px;
overflow: hidden;
background: rgba(0,0,0,.5);
color: white;
margin-top: 2px;
}
.hide{
display: none;
}
</style>
<script type="text/javascript" >
function heightChangePersist(elem,startHeight,endHeight,steps,intervals,powr) {
if (elem.heightChangePersist) window.clearInterval(elem.heightChangePersist);
var currStep = 0;
var a = document.getElementById('button');
a.onclick = null;
elem.heightChangePersist = window.setInterval(
function() {
elem.currHeight = easeInOut(startHeight,endHeight,steps,currStep,powr);
elem.style.height = elem.currHeight+"px";
currStep++;
if (currStep > steps) {
window.clearInterval(elem.heightChangePersist);
a.onclick = function onclick(event) { invoke() };
}
}
,intervals)
;
}
function easeInOut(minValue,maxValue,totalSteps,currStep,powr) {
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalSteps)*currStep),powr)*delta);
return Math.ceil(stepp);
}
function invoke(){
var box1=document. getElementById('box1');
var box2=document. getElementById('box2');
box1.style.display='block';
box2.style.display='block';
heightChangePersist(box1,0,box1.offsetHeight,30,30,.5);
heightChangePersist(box2,0,box2.offsetHeight,30,30,.5);
}
</script>
<div id="button" class="box" onclick="invoke()">
click Here!!
</div>
<div id="box2" class="box hide">
This is a test done to check the animation of a particular item.Hoping it works and i hope to be successful in this trial..!!
</div>
<div id="box1" class="box hide">
This is a test done to check the animation of a particular
item.Hoping it works and i hope to be successful in this trial..!!This is a test done
to check the animation of a particular item.Hoping it works and i hope to be successful in this trial
..!!This is a test done to check the animation of a particular item.Hoping it works
and i hope to be successful in this trial..!!
</div>