Can we bind hide event or does jquery have an "onhide" event

Question

So far I tried onHide() type event in jQuery

Answer 1

This plugin will be able to detect the style change and notify you: jQuery Style Listener

You can use it like:

$('#yourElement').styleListener({

    // the styles that you want to monitor for changes
    styles: ['display'],

    // function to be called when a monitored style changes 
    changed: function(style, newValue, oldValue, element) {

        if(style == 'display' && newValue == 'none') {
            // element got hidden, do your stuff
        }
    }

});

Demo: http://jsfiddle.net/vaxQX/

Disclaimer: I am the author of the plugin.

Answer 2

You can provide a callback function on the function that gets hidden.

$('div').hide(function(){
    // do something
});

Not sure if this will work for what you want, but the function will only fire once hide is complete.

Answer 3

you can use http://api.jquery.com/promise/ :

http://jsbin.com/evajiv/1/edit

$('#test').click(function(){
   $(this).hide();      // I USED .fadeTo() in the demo
   $(this).promise().done(function(  ) {
       alert( 'HIDDEN!' );
   });
});

or in a classic way:

function fn(){
   alert('DONE!');
}

$('#test').click(function(){
   $(this).hide(fn);  // use callback
});

http://jsbin.com/evajiv/3/edit