title: Function takes longer than expected to complete
body: <p>I've created a simple sliding function that should make an element appear or disappear in the amount of time given.</p>
  
  <p>My formula for building this function is: <strong><code>ms = 1 pixel / (initial size / duration)</code></strong>, essentially calculating how many milliseconds should pass before subtracting <strong><code>1px</code></strong> from the element's <strong><code>height</code></strong> or <strong><code>width</code></strong>.</p>
  
  <p>My math logic says that the function should complete in <strong><code>1000ms</code></strong>, yet to me,  the time it takes to complete looks significantly more, without being sure how much.</p>
  
  <p>Why does it take longer than <strong><code>1s</code></strong> to complete and what may be causing it?</p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* ----- JavaScript ----- */
  function slide(el, duration, direction) {
    /* Default */
    duration = duration || 1000, direction = direction || "vertical";
  
    var
      dim = (direction === "horizontal") ? "width" : "height",
        
      /* Get how tall or wide el is in 'px' */
      size = initSize = parseFloat(
        getComputedStyle(el, null).getPropertyValue(dim) || el.style[dim]
      ),
        
      /* Get the previous size, so as to restore el to it */
      prevSize = el.style["prev" + dim] || 0,
        
      /* Calculating how many ms should pass before subtracting 1px*/
      ms = 1 / (initSize / duration),
        
      interval = setInterval(function() {
        /* If el is visible */
        if (initSize &gt; prevSize &amp;&amp; size &gt; prevSize) el.style[dim] = --size + "px";
        
        /* If el is not visible */
        else if (prevSize &gt; initSize &amp;&amp; size &lt;= prevSize) el.style[dim] = ++size + "px";
        
        /* Clear the interval when 0 is reached and cache the previous size */
        else {
          console.log("oops")
          el.style["prev" + dim] = initSize;
          clearInterval(interval);
        }
      }, ms);
  }
  
  slide(document.getElementById("a"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!----- HTML -----&gt;
  &lt;div id = "a" style = "width: 200px;height: 300px;background-color:black;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>