How can I make a paragraph bounce around in a div?

This just for fun to see if Javascript can do it.

Imagine I have a paragraph, and surrounding it, is a div or a table cell.

<table>
    <tr>
        <td>Foo</td>
        <td><p class="bouncer">This is the bouncing paragraph.</p></td>
    </tr>
</table>

Using Javascript, how would I make this object bounce? N开发者_Python百科ot just up and down, but the whole x and y axis movement. It would move diagonally until reaching the edge then come back and bounce realistically within the 'box'.

Is this possible? Again: This is just for fun, I'm not going to put it on a website and reproduce the whole Marquee debacle.

Here's something I whipped up - but remember my warning :)

http://jsfiddle.net/He5aQ/2/

It is possible.

The easiest way is to use jQuery's .animate() method and manipulate the top and left properties.

You can also try with plain Javascript, playing with position: relative or position: absolute, and manipulating top and left with setTimeout calls.

I just gave you an outline because you said it is for fun, so I guess you might want to solve this yourself. It is possible, so go on and have fun :).