Question

尝试动画下拉，工作。但是，如果我一直点击它，元素的高度会减少 - 最后变成0px !! ..不知道为什么会发生这种情况。

HeightChangePersist - 增加高度的功能（通过步骤 - 工作正常）

当你点击click here!!时，它第一次工作正常，但点击它会多次降低高度（逐渐） - 意外和不需要的 - 请告诉我我哪里出错！ ..

请帮助，javascript初学者。

这是代码 -

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

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

        }

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

heightChangePersist - 我从http://www.hesido.com/web.php?page=javascriptanimation

中选择的东西

Answer 1

这是因为当前一个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>

注意completeFlag。

Answer 2

这是因为它一直调用你点击'click me'事件调用。所以它无法完成间隔，然后是动画。如果在开始动画之前禁用它并在动画结束时重新启用它，则可以起作用：）

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

Javascript：多次点击会降低高度？

2 个答案: