Verificando un DIV se muestra actualmente en la página
-
19-09-2019 - |
Pregunta
Estoy aprendiendo jQuery y este es mi código hasta ahora:
<script type="text/javascript">
$(document).ready(function(){
$('#login').click(function(){
$('#login-box').fadeIn('fast');
});
});
</script>
Funciona, al hacer clic en el botón de inicio de sesión del DIV llamado login-box
muestra en la página. Lo que quería hacer era si el botón de inicio de sesión se vuelve a hacer clic, el DIV login-box
se desvanecerá de la página. Cuál sería la mejor forma de hacer esto? Estaba pensando:
$(document).ready(function(){
$('#login').click(function(){
if(login-box-is-showing)
{
$('#login-box').fadeOut('fast');
} else {
$('#login-box').fadeIn('fast');
}
});
});
Pero estoy confundido en cómo iba a determinar si el DIV está mostrando o no. También veo que jQuery tiene una función de activación, ¿sería mejor?
Gracias.
Solución
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
A continuación, se puede hacer esto:
$("#login").click(function () {
$("#login-box").fadeToggle()
});
Otros consejos
$("#login-box:visible")
le dirá si es visible, mientras que $("#login-box:hidden")
le dice si no lo es. Sin embargo, una forma más fácil de manejar esto sería usar $.toggle()
o incluso $.slideToggle()
si quieres un poco de un efecto añadido.
Creo que desee utilizar de palanca () .