jquery hide a div that contains flash without resetting it

Greetings, I have written a modal using jquery UI and it appears at the front of a flash movie thus the html inside the modal becomes corrupt, I tried to hide the movie right before modal gets triggered and reappears after closing the modal, works well but each .hide() and .show() the 开发者_开发百科flash movie gets resetted while all I want is to hide (without removing the movie) and displaying it once it is triggered to .show that modal div.

Tested in FF/linux, FF/WinXp, IE/WinXp, Safari/WinXp:

• put your flash container DIV into a new DIV with overflow:hidden.

basic:

• to hide flash-div: $('#id_div_with_swf').css("left","-2000px");
• to show flash-div: $('#id_div_with_swf').css("left","0px");

or, show and hide with animation effects:

• to hide flash-div: $('#id_div_with_swf').animate({ left: "-2000px"},1000);
• to show flash-div: $('#id_div_with_swf').animate({ left: "0"},1000);

html example:

<div style="width:200px; height:100px; overflow:hidden;">
<div id="id_div_with_swf" style="width:200px; height:100px; position:relative; left:0px; top:0px;">
<!-- flash here -->
</div>
</div>

you can't get a cross-browser working solution with .css('visibility', 'visible'/'hidden')

Working solution:

Use $('#myvideo').css('visibility', 'hidden') to hide and
$('#myvideo').css('visibility', 'visible') to show the div containing the video.

Just tested it with firebug.

EDIT: Please note, this is different from .hide() and .show(), as they use the display css, instead of visibility.

Perhaps move the movie div off the screen. Set it's Left position to be -1000 or something like that?

Then replace when the other div has disappeared?