Значение высоты не корректируется правильно по таймеру

Question

Я создал индикатор прогресса, обновив высоту элемента span в функции таймера (setInterval). Счетчик остановится при наведении курсора, а затем продолжит, когда он потеряет фокус (un-hover). Проблема заключается в том, что при возобновлении высота падает на пиксель или два, а не продолжается с предыдущей высоты. Я не могу понять, почему это происходит, поскольку значение, переданное в функцию таймера, является правильным. Есть идеи?

Адрес stripped-down demo.

Код JavaScript в вопросе:

function runFlipMeter(meter){ 
//if meter not defined 
if(!meter){ 
    meter = 0; 
} 

flipMeter = setInterval(function(){ 

    if(meter === 0){ 
     //meter at 0 
     grow = true; 
     $('.cube').toggleClass('flip'); 
    } 
    else if(meter === 100){ 
     //reached the top, go back up 
     grow = false; 
     $('.cube').toggleClass('flip'); 
    } 

    //update meter 
    $('#flipperTimer span').height(meter + '%'); 
    //increment meter 
    meter = !grow ? meter-1 : meter+1; 

}, 50); 

}//end runFlipMeter 

Answer 1

Проблема заключается в том, когда вы запускаете meter = $('#flipperTimer span').height(); в функции pauseFlipMeter, вы получили meterpx превышать количество, а не номер в процентах.

See on Codepen

var flipMeter; //defined globally so it can be paused/cleared 
var grow = false; 

function runFlipMeter(meter) { 
    //if meter not defined 
    if (!meter) { 
     meter = 0; 
    } 

    flipMeter = setInterval(function() { 

     if (meter === 0) { 
      //meter at 0 
      grow = true; 
      $('.cube').toggleClass('flip'); 
     } else if (meter === 100) { 
      //reached the top, go back up 
      grow = false; 
      $('.cube').toggleClass('flip'); 
     } else if (meter.toString().indexOf('px') > -1) { 
      meter = Math.ceil((parseInt(meter, 10)/$('#flipperTimer').height()) * 100); 
     } 

     //update meter 
     $('#flipperTimer span').height(meter + '%'); 
     //increment meter 
     meter = !grow ? meter - 1 : meter + 1; 

    }, 50); 

} //end runFlipMeter 

function pauseFlipMeter() { 
    var meter; 
    $('#resultsFlipper').hover(function() { 
     //pause the meter 
     window.clearInterval(flipMeter); 
     meter = $('#flipperTimer span').height(); 

    }, function() { 
     //resume the meter 
     runFlipMeter(meter + 'px'); 
    }); 
} 



runFlipMeter(); 

pauseFlipMeter();