onHide() type event in jQuery

Does anyone know of an onHide() event or something similar in jQuery?

I tried:

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

But apparently that doesn't work.

Edit:

Just to clarify, it's being hidden using CSS display:none.

I'm aware of the callback function but as I'm not 开发者_如何转开发hiding it (the CSS is) I can't use it. For what it's worth, I need to check when a dropdown is visible. It's being shown by the following CSS:

ul li:hover ul {
    display: block;
} 

There isn't a native or built in "hide" event but if you are using jQuery to hide it you can easily add a hide event:

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

You can pass call back function in hide function.

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

There is no "hide" event for any HTML element in the DOM. How are you "hiding" your elements? Are you using CSS to change the display or visibility?

If you're using display:none to hide an element, you can't detect when CSS changes. In IE, you can detect when a property changes but that doesn't extend to style values. You'll need to throw an event or do whatever the event is doing at the time the CSS display is changed.

For anyone finding this post two years later:

You know exactly when the menu is visible, right?! The CSS rule tells you. So instead of relying on onShow or onHide events, you can recreate the very same rule using jQuery and rely on the very same 'hover event':

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

Also, your script now acts independent of any stylesheet, so that presentation details do not dictate website behavior (nice).

In jQuery 3 exposes a "hide" and "show" events.

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

I have recently made a plugin to detect when an element gets hidden or shown in any way ( by core javascript or inspector or jQuery hide / show ).

pratik916/jQuery-HideShow

This extension keeps watching on element for visibility change. once changed it will emmit an event where you can handle your stuff

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

Easy-pizy, use DOM mutation observers for this:

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>

Here's the fiddle https://jsfiddle.net/JerryGoyal/qs01umdw/2/

This can be useful on some use cases: Using waitUntilExists jquery plugin (How to wait until an element exists?) you can detect when the value changes:

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

I used it for detecting when a loading gif was hidden.