Mostrar ajudante texto clicando caixa de texto usando jquery

Question

Eu quero mostrar ajudante de texto ao clicar nas caixas de texto. por exemplo: Se eu clicar em uma caixa de texto que deve nos ajudar dizendo o que digitar: Digite nome de usuário aqui

Eu tentei abaixo dado código, mas o texto "Digite nome de usuário" está desaparecendo, eu quero o texto a ser exibido até que o foco é alterado para outra caixa de texto .

Por favor, sugerir algum código para este tipo.

<input type = "text"/><span>Enter username</span>
<input type = "text"/><span>Enter password</span>     


$(document).ready(function(){
    $("input").focus(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });
});

Answer 1

Algo como o seguinte deve fazê-lo

$(function(){
    $("input")
        .focus(function () {
            $(this).next("span").fadeIn(1000);
        })
        .blur(function () {
             $(this).next("span").fadeOut(1000);
        }); 
});

Aqui é um demonstração de trabalho

Answer 2

Eu não sei por que você está manipulando a propriedade de exibição CSS, bem como usar fadeIn / fadeOut:

$(document).ready(function(){
    $("input").focus(function () {
         $(this).next("span").fadeIn(1000);
    }).blur(function() {
        $(this).next("span").fadeOut(1000);
    });
});