Vérification si un DIV est actuellement affiché sur la page

Question

J'apprends jQuery et c'est mon code à ce jour:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#login').click(function(){ 
     $('#login-box').fadeIn('fast'); 
    }); 
}); 
</script> 

Il fonctionne, lorsque vous cliquez sur le bouton de connexion du DIV appelé login-box montre sur la page . Ce que je voulais faire était de cliquer sur le bouton de connexion, le login-box DIV disparaitra de la page. Quelle serait la meilleure façon de faire cela? Je pensais:

$(document).ready(function(){ 
    $('#login').click(function(){ 
     if(login-box-is-showing) 
     { 
      $('#login-box').fadeOut('fast'); 
     } else { 
      $('#login-box').fadeIn('fast'); 
     } 
    }); 
}); 

Mais je suis confus à la façon dont je déterminerais si le DIV est montrant ou non. Je vois aussi que jQuery a une fonction bascule, serait-ce mieux?

Merci.

Answer 1

de Karl Swedberg

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 

Ensuite, vous pouvez le faire:

$("#login").click(function() { 
     $("#login-box").fadeToggle() 
}); 

Answer 2

$("#login-box:visible") vous dira s'il est visible, alors que $("#login-box:hidden") vous dira si ce n'est pas le cas. Cependant, un moyen plus facile de gérer cela serait d'utiliser $.toggle() ou même $.slideToggle() si vous voulez un peu d'un effet supplémentaire.

Answer 3

Je pense que vous voulez utiliser toggle().