исчезать различные div и входящий текст, используя jQuery

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;
}

jQuery, который запускается при загрузке dom:

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

Это затухает первый пузырь после небольшой задержки, а затем затухает, затем следует второй пузырь.

То, что я хотел бы сделать сейчас, это иметь некоторыесоответствующий текст на входе постепенно исчезает вместе с пузырьками (как в примере, с которым я связан).Я действительно не знаю, как справиться с этим ..

спасибо за чтение.

Answer 1

Примечание, которое может указать вам правильный путь, заключается в том, что «текст», который вы видите, предположительно находящийся в поле ввода, на самом деле является div, размещенным поверх поля ввода, создавая иллюзию того, что он находится во вводе.коробка.

Кроме того, это также может помочь.;)