Why is this animate marginTop function is not working like I expect?
<p>Still trying to figure this out from yesterday.</p>

<p>I am trying to scroll an element up 50 pixels at a time by animating it's "marginTop" property.  Problem is, on each click of my trigger, the element "resets" and animates from 0.  Can anyone explain this confusing behaviour to me?</p>

<p>Look at my alerts here</p>

<pre><code>$(document).on("click",".scroll-control",function(e){
    e.preventDefault();
    var newMarginTop = parseInt($('.scroll-frame').css('marginTop'));
    alert (newMarginTop);  // returns 0
    newMarginTop = newMarginTop - 50;
    alert (newMarginTop);  // returns -50
    $('.scroll-frame').animate({"margin-top": newMarginTop},1000);
    var newMarginTop = parseInt($('.scroll-frame').css('marginTop'));
    alert (newMarginTop);  // returns 0  &lt;&lt;&lt; ??? Why not -50 ???    
});
</code></pre>
