jQuery détecter si un élément est visible

Question

À l'aide de .fadeIn() et .fadeOut(), j'ai été masquage/affichage d'un élément sur ma page, mais avec deux boutons, l'un pour se cacher et un pour montrer. Maintenant, je veux avoir un bouton pour alterner les deux. Donc, ma question est comment puis-je détecter si l'élément est visible ou pas?

Mon code HTML tel qu'il est:

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

Mon JS comme il est:

<script>
    function showTestElement(){
        $('#testElement').fadeIn('fast');
    }

    function hideTestElement(){
        $('#testElement').fadeOut('fast');
    }
</script>

Mon code HTML que je voudrais avoir:

<a onclick="toggleTestElement()">Show/Hide</a>

Mon JS que je voudrais l'avoir, bien que pur jQuery serait sympa:

<script>
    function toggleTestElement(){
        if (document.getElementById('testElement').***IS_VISIBLE***) {
            $('#testElement').fadeOut('fast');
        }
        else{
            $('#testElement').fadeIn('fast');
        }
    }
</script>

Toute aide reçue avec gratitude..

Answer 1

Vous êtes à la recherche pour:

.is(':visible')

Bien que vous devrez probablement changer votre sélecteur à utiliser jQuery considérant que vous êtes de l'utiliser dans d'autres endroits de toute façon:

if($('#testElement').is(':visible')) {
    // Code
}

Il est important de noter que si l'une des cibles de l'élément parent éléments sont cachés, alors .is(':visible') sur l'enfant sera de retour false (ce qui est logique).

---

L'expansion encore plus loin, il y a un construit en fonction jQuery appelés $.fadeToggle():

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}

Answer 2

Il n'est pas nécessaire, il suffit d'utiliser fadeToggle() sur l'élément:

$('#testElement').fadeToggle('fast');

Voici une démo.

Answer 3

if($('#testElement').is(':visible')){
    //what you want to do when is visible
}