onHide() type event in jQuery

Solution 1:

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);
}

Solution 2:

You can pass call back function in hide function.

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

Solution 3:

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.

Solution 4:

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).

Solution 5:

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

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