Prüfen, ob ein DIV zur Zeit auf der Seite angezeigt wird

Question

Ich lerne jQuery und dies ist mein Code so weit:

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

Es funktioniert, wenn Sie die Login-Button login-box auf der Seite mit dem Namen der DIV klicken zeigt. Was ich tun wollte, war, wenn die Login-Taste erneut geklickt wurde, die login-box DIV von der Seite verblassen. Was wäre der beste Weg, dies zu tun? Ich dachte:

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

Aber ich bin verwirrt, wie ich feststellen würde, wenn das DIV zeigt oder nicht. Ich sehe auch, dass jQuery eine Toggle-Funktion hat, wäre das besser?

Danke.

Answer 1

Karl Swedberg

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

Dann können Sie dies tun:

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

Answer 2

$("#login-box:visible") wird Ihnen sagen, wenn es sichtbar ist, während $("#login-box:hidden") Sie sagt, wenn es nicht ist. Allerdings wäre die Verwendung $.toggle() oder sogar $.slideToggle() wenn Sie ein wenig einer zusätzlichen Effekt wollen.

Answer 3

Ich glaube, Sie Toggle () verwenden möchten.