Mostrar texto de ayuda al hacer clic en el cuadro de texto usando jquery

Question

Quiero mostrar el texto de ayuda al hacer clic en los cuadros de texto. por ejemplo: si hago clic en un cuadro de texto, debería ayudarnos diciendo qué escribir: ingrese el nombre de usuario aquí

He intentado debajo del código dado, pero el texto " Ingresar nombre de usuario " se está desvaneciendo, quiero que el texto se muestre hasta que el enfoque cambie a otro texto cuadro.

Por favor, sugiere algún 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 lo siguiente debería hacerlo

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

Aquí hay una Demostración de trabajo

Answer 2

No estoy seguro de por qué estás manipulando la propiedad de visualización de CSS y utilizando fadeIn / fadeOut:

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