使用jQuery淡入和淡出不同的div以及输入文本

Question

我对jQuery相当陌生，并且正在尝试重现此网站http://www.wolframalpha.com/的帮助提示

我已经取得了一些进展，但现在正在挣扎。 这是我到目前为止所拥有的：

帮助气泡的html：

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

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

风格：

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

加载dom时运行的jQuery：

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

短暂延迟后，这会淡入第一个气泡，然后淡出，然后出现第二个气泡。

我现在想做的是在输入中有一些相应的文本以及气泡（随着我链接到的示例）的淡入和淡出。 我真的不知道该如何解决。

谢谢阅读。

Answer 1

一条可能使您误入歧途的注释是，您所看到的“文本”实际上是在输入框中，实际上是一个div堆叠在输入框的顶部，从而造成了它在输入框中的错觉。

此外， 这可能也有帮助。 ;）