Javascript：高度減少多次點擊？

嘗試了下拉動畫，工作。但是，元素的高度減少，如果我不斷點擊它 - 最後變成0px !! ..不知道爲什麼會發生這種情況。Javascript：高度減少多次點擊？

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

來源

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

這是因爲你叫再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。

來源

2011-09-22 09:27:36

但是，即使高度函數被調用它得到了完成againg之前，Y應高度變化重新啓用它？ –

忘了提及 - 謝謝一噸，問題解決是的，但更好奇我在哪裏出錯？ –

如果在函數完成之前調用該函數，box1.offsetHeight和box2.offsetHeight將與第一次不同 –

Javascript：高度減少多次點擊？

回答

相關問題