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?
4 respuestas
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(' '); // inserting a blank correct , so that actually the div take some space
});
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 !!
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();
});
});
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;
}
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.