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 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&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/AlPqL7IUT6M&hl=en&fs=1&" 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!

Answer 2

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 3

My solution, though it doesn't work exactly the same way, was to use a callback function in the fadIn() to add the object tags to the div. It does mean that the object itself is not being faded, but I suppose to give the illusion you could add an image to the div, and then replace the image with the object code when the fadeIn is complete.

Answer 4

So I get the same problem. Changing wmode parameter to "opaque" made it work.

Answer 5

@dalbaeb answer is probably the best one but the strange thing is it fails with some ugly error (d is undefined in jQuery 1.4 and e is undefined in 1.5, looks like the chunk of code is related to the queue handling).

Surprisingly, it works in jQuery 1.3!