자바 스크립트 : 높이가 여러 번의 클릭으로 감소합니까?

은 드롭 다운 애니메이션을 시도했습니다.하지만, 계속 클릭하면 요소의 높이가 줄어 듭니다 - 마침내 0px가됩니다 !! 왜 이런 일이 일어나고 있는지 확실하지 않습니다.자바 스크립트 : 높이가 여러 번의 클릭으로 감소합니까?

는 HeightChangePersist - 높이를 증가 funciton - 당신이 click here!! 클릭하면

, 그것은 좋은 1 시간을 작동하지만 그것에 번 이상 클릭하면 높이를 감소시킨다 (단계를 통해 잘 작동) (점진적) - 예기치 않은 및 원치 않는 - 제발 내가 잘못 가고있어 말해봐! ..

친절한 도움, 자바 스크립트 초보자.

<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 - - 난 당신이 아직 때 이전 heightChangePersist heightChangePersist 기능을 다시하지라고 때문이다 http://www.hesido.com/web.php?page=javascriptanimation

출처

2011-09-22 Vivek Chandra

이벤트 호출을 '클릭하십시오'를 클릭하면 항상 호출되기 때문입니다. 따라서 인터벌과 애니메이션을 끝낼 수 없습니다. 당신이 전에 애니메이션을 시작하고 사용하지 않으면 애니메이션은,이 완료있어 againg 전에 높이 함수가 호출 된 경우에도, y는해야 높이 변화를 :)

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

출처

2011-09-22 09:34:15 sirLisko

Y는 다른 함수가 끝나기 전에 높이를 변경해야합니까? –

그래, @robby 이미 언급했듯이, 나는 이전 호출이 끝난 후에 만해야한다.하지만 나는 여러 번의 호출로 높이가 변한다. 어느 쪽이든, 해결책을 주셔서 감사합니다. –

. setInterval (및 animation)이 완료되지 않은 경우 offsetHeight가 변경되기 때문입니다. – sirLisko

에서 집어 뭔가 여기

코드입니다 완료되었습니다.

나는 코드를 수정하고, 문제가 해결 :

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

출처

2011-09-22 09:27:36

작동하지만 위에있을 때 가 다시 활성화 ?? –

그리고 언급을 잊어 버렸습니다. - 고맙습니다. 문제는 해결되었지만, 더 이상한 부분이 궁금합니다. –

함수가 완료되기 전에 함수를 호출하면 box1.offsetHeight 및 box2.offsetHeight가 처음으로 –

자바 스크립트 : 높이가 여러 번의 클릭으로 감소합니까?

답변

관련 문제