Question

I’m trying to get text in a div to vertically autoscroll (at one speed) and pause when the user hovers their cursor over it but can’t seem to get my code working. How can I go about achieving this? This is my code so far:

JavaScript

$('#scroll').children().animate({'margin-top': '-=' + ($('#scroll').children().height()-100)}, 10000);

HTML

<div id="scroll">Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here<br />
        <br />
        Content here and more content here </div>​

​In addition, I’ve also uploaded my code here: http://jsfiddle.net/5DmZh/.

Answer 1

A more cost effective approach would be to place another wrapper inside #scroll and animate that instead of trying to position every child element.

Check out my code at jsfiddle, though I guess you want the animation to loop forever.