Is there a javascript(jQuery) plugin to hide/show flash swf seaminglessly?

As we know we can't $.show/$.hide to show/hide the flash component,which will cause the flash player to redraw it.

Is there a flexible component that can hide/show flash components with redraw them?

<div>开发者_如何学运维; ---flash 1 here </div>
<div> ---flash 2 here </div>
...
<div> ---flash N here </div>

---

For hide flash you can use visibility css property. But in this case hidded element takes up space. If you need that element would not take place you can just change height and width of parent div to zero. This trick work for me. You code should be look like this:

var height;
var width;

function hideFlash(div)
{
   $(div).css("visibility", "hidden");
   //you need to store height and weight somewhere
   var height = $(div).height();
   var width = $(div).width();
   $(div).height(0);
   $(div).width(0);
}

function showFlash(div)
{
   $(div).css("visibility", "visisble");
   $(div).height(height);
   $(div).width(width);
}

---

Have a look at the jQuery SWFObject Plugin.

Taken from their examples page:

<div style="text-align: center;">
    <div id="celerant" style="padding: 10px;"></div>
    <input type="button" onClick="$('#celerant').flash({swf:'sine.swf',height:250,width:300});" value="Add Flash">
    <input type="button" onClick="$('#celerant').flash().remove();" value="Remove Flash">
</div>

---

I don't know about flexible component. But when I need to display previously hidden flash object, I copy it using .html() to new container. For example:

$('#so_object').hide();

$('#so_thumb').click(function(){
$(this).html($('#so_object').html());
});