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

Question

J'apprends jQuery et voici 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 affiche sur la page. Ce que je voulais faire était si le bouton de connexion a été cliqué à nouveau, la DIV login-box disparaîtra 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 comment je déterminer si la DIV montre ou non. Je vois aussi que jQuery a une fonction de 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 faire ceci:

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

Answer 2

$("#login-box:visible") vous dira si elle est visible, alors que $("#login-box:hidden") vous indique si ce n'est pas. Cependant, d'une manière plus facile de manipuler ce 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 bascule () .