Trying to incrementally animate "marginTop" with jQuery, but it resets each time. Why?
<p>I'm having trouble implementing a "scroll more text" feature. </p>

<pre><code>&lt;a href="#" id="scroll-trigger"&gt;More&lt;/a&gt;

&lt;div id="outer-frame"&gt;
&lt;div id="scroll-frame"&gt;

.. long text

&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>.. in the css</p>

<pre><code>#outer-frame {
height:200px;
overflow:hidden;
}
</code></pre>

<p>and the Jquery ..</p>

<pre><code>$(document).on("click","#scroll-control",function(e){
    (e)preventDefault();
    $('.scroll-frame').animate({"marginTop":"-=50px"},1000);     
});
</code></pre>

<p>That's the basic construction.  There is more to it, but even when I have stripped down to this it does not work like I would expect.</p>

<p>I simply want the user to be able to scroll the text up by 50px increments. </p>

<p>But each time the #scroll-trigger is clicked, the .scroll-frame "resets" and scrolls from 0 up to -50px.</p>

<p>I have tried grabbing the dynamic CSS each time</p>

<pre><code>$(document).on("click","#scroll-control",function(e){
    (e)preventDefault();
    var newMarginTop = ($('.scroll-frame').css('marginTop'));  // should get the new value?
    newMarginTop -= 50;
    $('.scroll-frame').animate({"marginTop": newMarginTop },1000);     
});
</code></pre>

<p>That didn't work either.  It still resets and scrolls from zero.  What am I not getting?  I'm looking at the jQuery manual and this ..</p>

<pre><code>$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});
</code></pre>

<p>.. moves the box progressively more and more to the left.  Why is my situation different?</p>
