Événement de type onHide() dans jQuery

Question

Quelqu'un connaît-il un événement onHide() ou quelque chose de similaire dans jQuery?

J'ai essayé:

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

Mais apparemment cela ne fonctionne pas.

Modifier: Juste pour clarifier, il est caché en utilisant CSS display:none.
Je suis conscient de la fonction de rappel mais comme je ne la cache pas (le CSS l'est), je ne peux pas l'utiliser. Pour ce que ça vaut, j'ai besoin de vérifier quand une liste déroulante est visible. Il est illustré par le code CSS suivant:

ul li:hover ul { 
    display: block; 
} 

Answer 1

Il n'y a pas d'événement "hide" pour tout é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 les changements de CSS. Dans Internet Explorer, vous pouvez détecter le moment où une propriété est modifiée, mais pas les valeurs de style. Vous devez lancer un événement ou faire tout ce que l'événement fait au moment où l'affichage CSS est modifié.

Answer 2

Il n'y a pas un natif ou construit dans l'événement « cacher », mais si vous utilisez jQuery pour le cacher, vous pouvez facilement ajouter un événement hide:

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

Answer 3

Pour toute personne qui trouve ce poste deux ans plus tard:

Vous savez exactement quand le menu est visible, non?! La règle CSS vous le dit. Ainsi, au lieu de compter sur les événements onShow ou OnHide, vous pouvez recréer la même règle en utilisant jQuery et compter sur la même « événement vol stationnaire »:

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

En outre, votre script agit maintenant indépendant de toute feuille de style, afin que les détails de la présentation ne dictent pas le comportement du site (gentil).

Answer 4

Cela peut être utile dans certains cas d'utilisation: Utilisation waitUntilExists plugin jquery (How to wait until an element exists?), vous pouvez détecter les changements 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 a été caché.

Answer 5

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

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

Answer 6

En jQuery 3 expose les événements "hide" et "show".

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

Answer 7

J'ai récemment fait un plugin pour détecter un élément qui est caché ou montré de quelque manière que (par noyau javascript ou de l'inspecteur ou jQuery cacher/montrer).

pratik916/jQuery-HideShow

Cette extension continue à regarder sur l'élément de changement de visibilité.une fois changé il Emmit un événement où vous pouvez gérer vos affaires

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

Answer 8

facile Pizy, utilisez DOM mutation observers pour cela:

JS:

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

HTML:

<div class='mydiv'> 
</div> 

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