What is the difference between animate and setInterval in my case
<p>HTML</p>

<pre><code>&lt;div id="answer" style="width:100px;height:50px;"&gt;Answer&gt;&lt;/div&gt;
</code></pre>

<p>JS</p>

<pre><code>$(function () {
    var answer = $('#answer');
    var sizeChangerHandle;

    function setBackground() {
        sizeChangerHandle = setInterval(changeConstantly, 1);
    }


    function changeConstantly() {

        answerHeight = answer.height();
        answerWidth = answer.width();
        answer.width(answerWidth + 1);
        answer.height(answerHeight + 1);
        setTimeout(function () {
            clearInterval(sizeChangerHandle);
        }, 300)

        // I am only using one of these codes, either the above or the below! I comment the other one out when I use one.
        answer.animate({
            width: 400,
            height: 200
        }, 300);

    }

    setBackground();
});
</code></pre>

<p>I am trying to widen my DIV from being 100px wide to 400px wide and to have this take 300 split seconds. When I use the animate function, it works perfectly. The Div ends up 400px wide and it takes 300 split seconds. When I use the Intervals, the DIV stops its width at 176px. Why is this, it should really be running for 300 split seconds?  </p>
