En utilisant .fadeIn()
et .fadeOut()
, j'ai caché/affiché 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.
Mon code HTML / JavaScript tel qu'il est : .
<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>
function showTestElement() {
$('#testElement').fadeIn('fast');
}
function hideTestElement() {
$('#testElement').fadeOut('fast');
}
Mon HTML / JavaScript comme j'aimerais 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 ?
Vous cherchez :
.is(':visible')
Vous devriez probablement modifier votre sélecteur pour utiliser jQuery, car vous l'utilisez déjà à 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 masqué, alors .is(':visible' ;)
sur l'enfant retournera false
(ce qui est logique).
:visible
a la réputation d'être un sélecteur assez lent car il doit parcourir l'arbre DOM en inspectant un tas d'éléments. Il y a cependant de bonnes nouvelles pour jQuery 3, comme l'explique cet article (Ctrl + F pour :visible
) :
Grâce à un travail de détective de Paul Irish chez Google, nous avons identifié certains cas où nous pouvions éviter 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 jusqu'à 17 fois plus rapide maintenant !
Gardez à l'esprit que, même avec cette amélioration, les sélecteurs tels que :visible et :hidden peuvent être coûteux car ils dépendent du navigateur pour déterminer si les éléments s'affichent effectivement 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éconseillions 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 performance.
Pour aller encore plus loin dans votre utilisation spécifique, il existe une fonction jQuery intégrée appelée [$.fadeToggle()
] (http://api.jquery.com/fadeToggle/) :
function toggleTestElement() {
$('#testElement').fadeToggle('fast');
}
if($('#testElement').is(':visible')){
//what you want to do when is visible
}