Javascript：複数のクリックで高さが減少しますか？

は、ドロップダウンをアニメーション化しようとしました。しかし、私がクリックし続けると、要素の高さが下がります - 最終的に0pxになります！Javascript：複数のクリックで高さが減少しますか？

はHeightChangePersist - 高さを高めるためにfunciton - あなたはclick here!!をクリックしたとき

が、それは罰金1回目に動作しますが、それを複数回クリックすると、高さを減少させ（工程を経て正常に動作します）（徐々に） - 予期しない、望ましくない - 私が間違っているところを教えてください!! ..

親切に助けて、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 - 私はまだ時に以前のheightChangePersistないあなたは再びheightChangePersistの関数を呼び出したためですhttp://www.hesido.com/web.php?page=javascriptanimation

出典

2011-09-22 Vivek Chandra

「イベントを呼び出す」をクリックするたびに呼び出されるためです。それで、インターバルとアニメーションを終了することはできません。あなたはそれを無効にした場合の前にあなたのアニメーションを開始し、それが動作する上でアニメーションがあるときにそれを再度有効:)

<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

他の関数が終了する前に高さを変更する必要がありますか？ –

うーん、@robbyが既に言及していたように、以前の呼び出しが完了したら、私はそれを行うしかありません。しかし、私は複数の呼び出しで高さが変わってしまいました。どちらにせよ、解決策をくれてありがとう。 –

setInterval（およびアニメーション）が終了していない場合は、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

しかし、それが完了してしまったの前に高機能をagaingと呼ばれていた場合でも、yは高さ変化をすべき？ –

そして言及を忘れていました - ありがとう、問題は解決しました。 –

関数が完了する前に関数を呼び出した場合、box1.offsetHeightとbox2.offsetHeightは最初とは異なります –

Javascript：複数のクリックで高さが減少しますか？

答えて

関連する問題