Question Détecter si un élément est visible [dupliquer]


Cette question a déjà une réponse ici:

En utilisant .fadeIn() et .fadeOut(), J'ai caché / montré un élément sur ma page, mais avec deux boutons, un pour cacher et un pour montrer. Je veux maintenant avoir un bouton pour basculer les deux. Par conséquent, ma question est comment puis-je détecter si l'élément est visible ou non?

Mon HTML tel qu'il est:

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

Mon JS tel qu'il est:

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

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

Mon HTML comme je voudrais l'avoir:

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

Mon JS comme je voudrais l'avoir, bien que le jQuery pur serait gentil:

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

Toute aide reçue avec reconnaissance ..


457
2018-01-07 23:44


origine


Réponses:


Vous cherchez:

.is(':visible')

Bien que vous deviez probablement changer votre sélecteur pour utiliser jQuery, sachant que vous l'utilisez dans d'autres endroits:

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

Il est important de noter que si l'un des éléments parents d'un élément cible est caché, alors .is(':visible') sur l'enfant reviendra false (qui a du sens).

jQuery 3

:visible a eu la réputation d'être un sélecteur plutôt lent car il doit traverser l'arbre DOM pour inspecter un tas d'éléments. Il y a de bonnes nouvelles pour jQuery 3, cependant, comme ce post explique (Ctrl + F pour :visible):

Grâce à un travail de détective effectué par Paul Irish chez Google, nous avons identifié quelques cas où nous pourrions passer un tas de travail supplémentaire lorsque des sélecteurs personnalisés comme: visible sont utilisés plusieurs fois dans le même document. Ce cas particulier est 17 fois plus rapide maintenant!

Gardez à l'esprit que même avec cette amélioration, les sélecteurs comme: visible et: caché peuvent être coûteux car ils dépendent du navigateur pour déterminer si les éléments sont réellement affichés sur la page. Cela peut nécessiter, dans le pire des cas, un recalcul complet des styles CSS et de la mise en page! Bien que nous ne déconseillons pas leur utilisation dans la plupart des cas, nous vous recommandons de tester vos pages pour déterminer si ces sélecteurs causent des problèmes de performances.


En développant encore plus loin votre cas d'utilisation spécifique, il y a une fonction intégrée jQuery appelée $.fadeToggle():

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

705
2018-01-07 23:45



Il n'y a pas besoin, juste utiliser fadeToggle() sur l'élément:

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

Voici une démo.


37
2018-01-07 23:46



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

24
2018-01-07 23:46