Why does JQuery not fade a flash object properly?

Question

I am trying to fade out a Flash embed object and fade in regular Html.

For some reason the callback of the fadeout method gets fired multiple times, before the fade out has finished. The result is that the Html gets appended multiple times in the callback function and it blinks an extra time.

This doesn't happen when I try fading regular Html.

Is the fadeout function not meant to work with flash?

Html:

<a id="HideFlash" href="#">Hide Flash</a>
<div id="FlashContainer" >
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
        width="100" height="50" id="TEST" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="demo_banner.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="wmode" value="transparent">
        <embed src="demo_banner.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="100" height="50" name="TEST"
            align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash"
            pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</div>
<div id="RegularContent" >
<h1>Before Fade</h1>
</div>

JQuery:

 $('#HideFlash').click(function() {
        $('#FlashContainer *').fadeOut('slow', function() {

            $('#FlashContainer').append("<p style='display: none;'>This is in the flash container</p>");
            $('#FlashContainer p').fadeIn('slow');
        });

        $('#RegularContent *').fadeOut('slow', function() {

        $('#RegularContent').append("<p style='display: none;'>This is in the regular content after fade</p>");
        $('#RegularContent p').fadeIn('slow');
        });
    });

Answer 1

I think it's because jQuery is not equipped to manipulate opacity of a third-party multimedia object, even though it is embedded into standard HTML markup.

Your best bet could be just positioning an invisible DIV with the same dimensions on top of it and then just fading that in/out (but this is just pure speculation).

Answer 2

I can't pinpoint exactly what the issue is, but i have a working example here: http://jsbin.com/ayoqe

I think it may be the asterisk * in your jquery selector? It looks as if you're trying to hide everything inside the container instead of hiding the container itself.

$(document).ready(function(){ 

  $('#RegularContent').hide(); // hide the regular content on load

  $('#HideFlash').click(function() { 
      $('#FlashContainer').fadeOut('slow'); // fade out the flash container       
      $('#RegularContent').fadeIn('slow'); // fade in the regulare content
      return false; 
  }); 

});


<a id="HideFlash" href="#">Hide Flash</a> 
<div id="FlashContainer" > 
    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/AlPqL7IUT6M&amp;hl=en&amp;fs=1&amp;"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/AlPqL7IUT6M&amp;hl=en&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> 
</div> 
<div id="RegularContent"> 
<h1>Before Fade</h1> 
</div>

Hope that helps, and I hope I understood correctly!