Evénement de type onHide () dans jQuery

Est-ce que quelqu’un connaît un événement onHide () ou quelque chose de similaire dans jQuery?

J’ai essayé:

$(this).bind('hide', function(){ console.log('asdasda') }) 

Mais apparemment ça ne marche pas.

Edit: Juste pour clarifier, cela est caché en utilisant l’ display:none CSS display:none .
Je suis conscient de la fonction de rappel, mais comme je ne la cache pas (le CSS est), je ne peux pas l’utiliser. Pour ce que ça vaut, je dois vérifier quand une liste déroulante est visible. Cela est montré par les CSS suivants:

 ul li:hover ul { display: block; } 

Il n’y a pas d’événement “masquer” pour aucun élément HTML dans le DOM. Comment cachez-vous vos éléments? Utilisez-vous CSS pour modifier l’affichage ou la visibilité?

Si vous utilisez display: none pour masquer un élément, vous ne pouvez pas détecter quand CSS change. Dans IE, vous pouvez détecter le moment où une propriété est modifiée, mais cela ne s’étend pas aux valeurs de style. Vous aurez besoin de lancer un événement ou de faire ce qu’il fait au moment où l’affichage CSS est modifié.

Il n’y a pas d’événement “masqué” natif ou intégré, mais si vous utilisez jQuery pour le masquer, vous pouvez facilement append un événement masqué:

 var _oldhide = $.fn.hide; $.fn.hide = function(speed, callback) { $(this).sortinggger('hide'); return _oldhide.apply(this,arguments); } 

Vous pouvez passer la fonction de rappel dans la fonction de masquage.

 function iAmCallBackForHide() { alert('I am visible after hide'); } $('#clickMeToHide').hide( iAmCallBackForHide ); 

Pour ceux qui trouveront ce post deux ans plus tard:

Vous savez exactement quand le menu est visible, non?! La règle CSS vous dit. Ainsi, au lieu de compter sur les événements onShow ou onHide, vous pouvez recréer la même règle à l’ aide de jQuery et vous baser sur le même “événement survol”:

 $('ul li').hover(function () { // Whatever you want to do 'onShow' }, function () { // Whatever you want to do 'onHide' }); 

De plus, votre script agit maintenant indépendamment de toute feuille de style, de sorte que les détails de la présentation ne dictent pas le comportement du site Web (sympa).

J’ai récemment créé un plugin pour détecter quand un élément est masqué ou affiché de quelque manière que ce soit (par JavaScript, l’inspecteur ou le masquage / affichage de jQuery).

pratik916 / jQuery-HideShow

Cette extension continue à surveiller l’élément pour le changement de visibilité. une fois changé, il émettra un événement où vous pourrez gérer vos affaires

 $("#test_hidden").hideShow(function(e, visibility){ if(visibility == "shown") { console.log("Element is visible"); } else { console.log("Element is hidden"); } }) 

Dans jQuery 3 expose les événements “masquer” et “afficher”.

 $(document).on("hide", function() { console.log("browser page has been hidden"); }); 

Facile à utiliser, utilisez les observateurs de la mutation DOM pour cela:

JS:

 var observer = new MutationObserver(function(mutations) { console.log('div hide event fired!'); }); var target = document.querySelector('.mydiv'); observer.observe(target, { atsortingbutes: true }); 

HTML:

 

Voici le violon https://jsfiddle.net/JerryGoyal/qs01umdw/2/

Cela peut être utile dans certains cas d’utilisation: En utilisant waitUntilExists, le plugin jquery ( Comment attendre qu’un élément existe? ), Vous pouvez détecter le changement de valeur:

 $(li:hidden).waitUntilExists(function(){ // your code when it is hidden }, /*onlyOnce = */ true); 

Je l’ai utilisé pour détecter quand un gif de chargement était caché.