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!