jquery trigger function when an element is hidden

What would be the best way to trigger a function when a certain DIV is hidden.

I want to destroy some Flash object from the page when an element is hidden, and re-cr开发者_运维问答eate them when the element is shown.

e.g.

<div id="flashContainer> // flash object </div>

$("#flashContainer).hide(); //trigger function that destroys the flash object
$("#flashContainer).show(); //trigger function that creates the flash object

Background:

The reason I want to do this, is that I have a long page, with some navigation that "steps throught" divs as if they were pages. In IE, all these hidden divs load up the flash and start downloading the video, hogging memory and bandwidth in the process

jQuery provides an override to the show() and hide() methods that allows you to pass a callback function that is fired once the animation is complete

.show( duration, [ callback ] )

You could use this like

$('#flashContainer').hide('slow', function(e) {
  //put your code here to remove your flash
  $('#flashId').remove();  //something like this maybe
  alert('hidden');
});

$('#flashContainer').show('slow', function(e) {
  //add your flash here
});

However in the case of show(), the flashcontainer will be shown before your flash object is loaded so you may want to create your flash before calling show() something like

$('#flashcontainer').append('<object><!-- your flash html here --></object>');
$('#flashcontainer').show();

$("#flashContainer:hidden").show();

Taken from jQuery offical page, does this help?

Can you be more specific?

It will be better to show and hide the flash object rather than crating and destroying.

Something like

$("#flashContainer).hide("slow", function(){
    $("#yourflashobjid").hide();
});

$("#flashContainer).show("slow", function(){
    $("#yourflashobjid").show();
});