CODEWITHSUNDEEP
jquery
Yamada Akira
Yamada Akira

Reputation: 87

Exp meter in jQuery

I have this function. It fills my exp meter well, but when the exp is greater than the remaining exp to the next level it just shrinks down to zero. What I want is for the meter to fill up to 100% and THEN continue to fill the amount that is left from the exp earned on the next level. I hope I'm being clear here. Otherwise tell me and I will try and explain it better.

What is this function missing?

//These are my variables
var currentXP = 0;
var level = 1;
var maxXP = 250;

//This is my function
function Grow() {
    if(currentXP <= maxXP){
            $('#active_meter').animate({height:currentXP + "px"}, 500);
        }else{
            currentXP = maxXP - currentXP;
            level++;
            console.log("Level: " + level);
            $('#active_meter').animate({height:currentXP + "px"}, 500);
            document.getElementById("level").innerHTML = level;
    }
  }

Upvotes: 0

Views: 98

Answers (1)

Barmar
Barmar

Reputation: 780909

When the experience goes over the max, animate it up to the max and set currentXP to the amount left over in the new level. In the completion function for that animation, set the height down to0` and animate it up to the new exp level.

//These are my variables
var currentXP = 0;
var level = 1;
var maxXP = 250;

//This is my function
function Grow() {
  if (currentXP <= maxXP) {
    $('#active_meter').animate({
      height: currentXP + "px"
    }, 500);
  } else {
    currentXP = currentXP - maxXP;
    level++;
    console.log("Level: " + level);
    $('#active_meter').animate({
      height: maxXP + "px"
    }, 500, function() {
      $('#active_meter').css('height', '0px').animate({
        height: currentXP + "px"
      }, 500);
    });
    document.getElementById("level").innerHTML = level;
  }
}

Upvotes: 1

Related Questions