evento de tipo onHide () en jQuery

¿Alguien sabe de un evento onHide () o algo similar en jQuery?

Lo intenté:

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

Pero aparentemente eso no funciona.

Editar: solo para aclarar, se oculta con la display:none CSS display:none .
Soy consciente de la función de callback, pero como no la estoy ocultando (el CSS es) no puedo usarla. Por lo que vale, necesito verificar cuándo un menú desplegable es visible. Lo muestra el siguiente CSS:

 ul li:hover ul { display: block; } 

No hay ningún evento “oculto” para ningún elemento HTML en el DOM. ¿Cómo estás “escondiendo” tus elementos? ¿Estás usando CSS para cambiar la visualización o la visibilidad?

Si está usando display: none para ocultar un elemento, no puede detectar cuándo cambia CSS. En IE, puede detectar cuándo cambia una propiedad, pero eso no se extiende a los valores de estilo. Deberá lanzar un evento o hacer lo que haga el evento en el momento en que se modifique la visualización de CSS.

No existe un evento “oculto” nativo o incorporado, pero si está utilizando jQuery para ocultarlo, puede agregar fácilmente un evento hide:

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

Puede pasar la función de callback en la función ocultar.

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

Para cualquiera que encuentre esta publicación dos años después:

Sabes exactamente cuando el menú está visible, ¿no? La regla de CSS te dice. Por lo tanto, en lugar de confiar en los eventos OnShow u onHide, puedes recrear la misma regla usando jQuery y confiar en el mismo ‘evento hover’:

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

Además, su secuencia de comandos ahora actúa independientemente de cualquier hoja de estilo, por lo que los detalles de la presentación no dictan el comportamiento del sitio web (agradable).

Recientemente, he creado un complemento para detectar cuándo un elemento se oculta o se muestra de alguna forma (por core javascript o inspector o jQuery hide / show).

pratik916 / jQuery-HideShow

Esta extensión sigue mirando el elemento para cambiar la visibilidad. una vez modificado, emmitirá un evento donde podrá manejar sus cosas

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

En jQuery 3 expone eventos “ocultar” y “mostrar”.

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

Esto puede ser útil en algunos casos de uso: al utilizar el plugin de jquery de waitUntilExists ( ¿cómo esperar hasta que exista un elemento? ), Puede detectar cuándo cambia el valor:

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

Lo usé para detectar cuando un gif de carga estaba oculto.

Easy-pizy, usa los observadores de la mutación DOM para esto:

JS:

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

HTML:

 

Aquí está el violín https://jsfiddle.net/JerryGoyal/qs01umdw/2/