Javascript: Height reduces on multiple clicks ?
tried animating a dropdown,worked.But,the height of the element reduces if i keep clicking on it -- finally becomes 0px !!.. not sure why this is happening.
HeightChangePersist -- funciton to increase the height(via steps -- works fine)
when you click on click here!!,it works fine the 1st time but clicking on it more times reduces the height(gradually) -- unexpected and unwanted -- please do tell me where i'm going wrong!!..
Kindly help,javascript beginner.
Here's the code --
<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 - minVal开发者_开发问答ue;
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>
The heightChangePersist -- Something which i picked up from http://www.hesido.com/web.php?page=javascriptanimation
It's because it call all the times you click 'click me' the event invoke. So it can't finish the interval and then the animation. If you disable it before start your animation and re-enable it when animation is over it works :)
<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>
This is because you called the heightChangePersist function again when the previous heightChangePersist still not completed.
I modified your code, and the problem resolved:
<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>
Take note on the completeFlag.
加载中,请稍侯......
精彩评论