title: Why does JQuery not fade a flash object properly?
body: <p>I am trying to fade out a Flash embed object and fade in regular Html. </p>
  
  <p>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.</p>
  
  <p>This doesn't happen when I try fading regular Html.</p>
  
  <p>Is the fadeout function not meant to work with flash?</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;a id="HideFlash" href="#"&gt;Hide Flash&lt;/a&gt;
  &lt;div id="FlashContainer" &gt;
      &lt;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"&gt;
          &lt;param name="allowScriptAccess" value="sameDomain" /&gt;
          &lt;param name="allowFullScreen" value="false" /&gt;
          &lt;param name="movie" value="demo_banner.swf" /&gt;
          &lt;param name="quality" value="high" /&gt;
          &lt;param name="bgcolor" value="#ffffff" /&gt;
          &lt;param name="wmode" value="transparent"&gt;
          &lt;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" /&gt;
      &lt;/object&gt;
  &lt;/div&gt;
  &lt;div id="RegularContent" &gt;
  &lt;h1&gt;Before Fade&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code> $('#HideFlash').click(function() {
          $('#FlashContainer *').fadeOut('slow', function() {
  
              $('#FlashContainer').append("&lt;p style='display: none;'&gt;This is in the flash container&lt;/p&gt;");
              $('#FlashContainer p').fadeIn('slow');
          });
  
          $('#RegularContent *').fadeOut('slow', function() {
  
          $('#RegularContent').append("&lt;p style='display: none;'&gt;This is in the regular content after fade&lt;/p&gt;");
          $('#RegularContent p').fadeIn('slow');
          });
      });
  </code></pre>