animate({top: '-=dynamic value'}, xxx)

Could anyone help me please?

I'm trying to do an automatic scroll up and down the contents of a div element. For this I'm using the .animate(). Here is my Jquery 开发者_开发百科code snippet:

$(document).ready(function () {
$('.jspPane').animate({ top: '-=100' }, 2000).animate({ top: '+=100' }, 2000).stop();});

HTML looks like this:

    <div class="widgetInnerWrapper">
    <div class="widget logos">
        <div class="title">
            <h3>
                Membership</h3>
        </div>
        <div class="widgetContent">
            <div class="scrollContentWrapper">
                <div class="scroll-pane">
                    <div id="logosFull">
                        <div id="logosBottom">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I managed to do get it work with set values but the content of the div is likely to change and I would like to ask:

Can I somehow replace the top values '-=100' and '+=100' with dynamic ones? Or replace the animate with something else?

Sure, you can create the animate values dynamically, as long as they resolve to strings:

var maxX = 200;
$('.jspPane').animate({ top: '-=' + maxX }, 2000);

You need to use string concatenation:

top: "-=" + someValue