Verificando se uma div é mostrada atualmente na página
-
19-09-2019 - |
Pergunta
Estou aprendendo jQuery e este é o meu código até agora:
<script type="text/javascript">
$(document).ready(function(){
$('#login').click(function(){
$('#login-box').fadeIn('fast');
});
});
</script>
Funciona, quando você clica no botão de login, o div chamado login-box
mostra na página. O que eu queria fazer era se o botão de login fosse clicado novamente, o login-box
Div desaparecerá da página. Qual seria a melhor maneira de fazer isso? Eu estava pensando:
$(document).ready(function(){
$('#login').click(function(){
if(login-box-is-showing)
{
$('#login-box').fadeOut('fast');
} else {
$('#login-box').fadeIn('fast');
}
});
});
Mas estou confuso com a forma como determinaria se a div está aparecendo ou não. Eu também vejo que o jQuery tem uma função de alternância, isso seria melhor?
Obrigado.
Solução
a partir de Karl Swedberg
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
Então, você pode fazer isso:
$("#login").click(function () {
$("#login-box").fadeToggle()
});
Outras dicas
$("#login-box:visible")
dirá a você se é visível, enquanto $("#login-box:hidden")
diz a você se não for. No entanto, uma maneira mais fácil de lidar com isso seria usar $.toggle()
ou até $.slideToggle()
Se você deseja um efeito adicional.
Eu acho que você quer usar alternar().