fade different divs in and out along with input text using jQuery

I am fairly new to jQuery, and am trying to reproduce the help bubbles from this site http://www.wolframalpha.com/

I have made some progress, but am now struggling. This is what i have so far:

html of the help bubbles:

<div class="help" id="help1">
  <p>foo</p>
</div>

<div class="help" id="help2">
  <p>bar</p>
</div>

with the style:

div.help {
  top: 40px;
  left: 0;
  position: absolute;
  background-color: #gray;
  padding: 10px;
  display: none;
}

jQuery which gets run when dom is loaded:

function help() {
  $('#help1').delay(1000).fadeIn(500).delay(4000).fadeOut(500, function() {
    $('#help2').fadeIn(500);
  });    
}

This fades the first bubble in after a short delay, and then fades it out, then follows with the second bubble.

What i would like to do now is have some correspondi开发者_如何学Cng text in an input fade in and out along with the bubbles (as in the example i linked to). I don't really know how to tackle this..

thanks for reading.

A note that might put you down the correct path is that the 'text' you are seeing supposedly being in the input box, is actually a div stacked on top of the input box, creating the illusion that it is in the input box.

Also, this might help also. ;)