web-dev-qa-db-fra.com

Détecter si un élément est visible avec jQuery

En utilisant .fadeIn() et .fadeOut(), j'ai caché/affiché un élément sur ma page, mais avec deux boutons, l'un pour masquer et l'autre pour afficher. Je veux maintenant avoir n bouton pour basculer les deux.

Mon HTML/JavaScript tel quel:

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

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

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

Mon HTML/JavaScript comme je voudrais l'avoir:

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

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

Comment détecter si l'élément est visible ou non?

javascriptjquery
497
TheCarver

Vous cherchez:

.is(':visible')

Bien que vous devriez probablement changer de sélecteur pour utiliser jQuery, sachant que vous l'utilisez ailleurs:

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

Il est important de noter que si l'un des éléments parents d'un élément cible est masqué, alors .is(':visible') sur l'enfant retournera false (ce qui est logique).

jQuery 3

:visible a la réputation d'être un sélecteur assez lent car il doit parcourir l'arborescence 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 à des travaux de détective de Paul Irish chez Google, nous avons identifié des cas dans lesquels nous pouvions ignorer un travail supplémentaire lorsque des sélecteurs personnalisés tels que: visible sont utilisés plusieurs fois dans le même document. Ce cas particulier est jusqu'à 17 fois plus rapide maintenant!

Gardez à l'esprit que même avec cette amélioration, des sélecteurs tels que: visible et: caché peuvent être coûteux, car ils dépendent du navigateur pour déterminer si des é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écouragions pas leur utilisation dans la plupart des cas, nous vous recommandons de tester vos pages pour déterminer si ces sélecteurs posent des problèmes de performances.

Pour aller encore plus loin dans votre cas d'utilisation spécifique, il existe une fonction intégrée dans jQuery appelée $.fadeToggle() :

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

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

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

Voici une démo.

42
Ry-
if($('#testElement').is(':visible')){
    //what you want to do when is visible
}
25
Ivan Castellanos