Tengo un botón que muestra una contraseña usando fadein y fadeout. Sin embargo, cuando la contraseña es una cadena vacía, el div no se desvanece.

Html

<div>    
    <div>********</div>
    <div class="password"></div>
    <input type="button" class="showPasswordButton" value="Show Password">
</div>

Jquery

   $(".showPasswordButton", false).on("click", function () {   
    var passwordDiv = $(".password");
    passwordDiv.text("");
    passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
        passwordDiv.empty();
    });
});

Aquí hay un enlace JSfiddle para jugar.

Si reemplazo la cadena vacía en passwordDiv.text ("") con cualquier valor, excepto el espacio en blanco, el desvanecimiento funcionará. He solucionado el problema utilizando un carácter de espacio en blanco de ancho completo japonés. Sin embargo, me gustaría que esto funcione sin un truco obvio. ¿Hay algo mal que estoy haciendo aquí o una forma de obtenerlo para que passwordDiv se desvanezca cuando el texto div es una cadena vacía?

0
Mark Hosang 29 ago. 2014 a las 10:59

4 respuestas

La mejor respuesta

Esta funcionando

El hecho es que no puedes verlo. Dado que por <div> no contiene nada, por lo tanto, no ocupa espacio en el HTML.

Puede ver su consola web y verá que la opacidad del div cambia.

SOLO intente agregar la altura y el ancho a continuación y podrá ver el cambio

.password {
    height: 500px;
    width: 500px;
    background-color: #ff0000;  // background of the div, so that you can see the change
}

Otra forma es no vaciar el <div>, solo tiene un espacio en blanco correcto insertado en el div, para que el <div> tome algo

        passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
           passwordDiv.html('&nbsp;'); // inserting a blank correct , so that actually the div take some space
        });
3
sanjeev 29 ago. 2014 a las 07:10

Aquí está el jsfiddle que he creado para usted http://jsfiddle.net/Tushar490/LkxLzhmt/9/

Necesita agregar dimensiones (ancho, alto) para el div que tiene la clase "contraseña". Como desea ver también ese efecto de desvanecimiento para la cadena vacía, también necesita establecer las dimensiones. Lo que sucede es que cuando le das texto a ese div, el div toma ancho: automático y alto: automático. Pero cuando no le das ningún texto a ese div, entonces ancho: automático y alto: automático no te mostrará nada y eso es puramente lógico .

Solo un CSS que quieras y nada más:

.password{
display:none;
width:100px;
height:15px;
}

Espero que mi respuesta te ayude !!

0
Tushar Raj 29 ago. 2014 a las 07:58

También puede hacer esto para mostrar el efecto de desvanecimiento de salida de cadena vacía: -

$(".showPasswordButton", false).on("click", function () {   
var passwordDiv = $(".password");
passwordDiv.html("<br>");
passwordDiv.fadeIn(500).delay(3000).fadeOut(500, function () {
    passwordDiv.empty();
});
});
0
Tushar Raj 29 ago. 2014 a las 08:02

Su div está vacío, por lo que puede establecer un borde o algo para ver el efecto.

.password{
width:50px;
    height:50px;
    border:solid 2px red;
}

Demo

0
Amit Kumar 29 ago. 2014 a las 07:06