Hi,

How can I achieve the following using jQuery?

My code includes a number of container <div>s each with 2 child elements. A <b> and a <p> tag as shown below:

Code:
<div id="0001" class="marquee">
<b>This is a headline</b>
<p>This is the first sentence of the article text</p>
</div>
The container <div>s will be a fixed width. For this example, we'll say 700px width. The <b> will be to the left and the <p> will be to the right but will fill all the remaining space without wrapping (e.g. style overflow: hidden. This will keep the 2 child elements on the same line as shown below:

This is a headline This is the first sentence of the article text

What I need to happen is as follows:
  • onMouseOver (div) a test occurs to see if the <p> tag overflows or not
  • If it does, then it scrolls to the left behind the <b> tag.
  • If it doesn't then nothing happens.
  • Once it has disappeared completely it either scrolls in from the right or fades in to it's original position.
  • This process must repeat as long as the mouseOver occurs.
  • onMouseOut (div) the <p> tag returns to it's original position.
  • onClick will be a location.href function to hyperlink the user.


Please ask any questions. Your help is much appreciated.