Warum blendet JQuery ein Flash-Objekt nicht korrekt aus?

Question

Ich versuche ein Flash-Embed-Objekt auszublenden und reguläres Html einzublenden.

Aus irgendeinem Grund wird der Callback der Fadeout-Methode mehrmals ausgelöst, bevor das Ausblenden beendet ist. Das Ergebnis ist, dass der HTML-Code mehrfach in der Callback-Funktion angehängt wird und eine zusätzliche Zeit blinkt.

Dies passiert nicht, wenn ich versuche, normales HTML zu verblassen.

Funktioniert die Ausblendfunktion nicht mit dem Blitz?

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

Ich kann nicht genau lokalisieren, was das Problem ist, aber ich habe ein funktionierendes Beispiel hier: http://jsbin.com/ayoqe

Ich denke, kann es der Stern * in der jQuery-Selektor sein? Es sieht so aus, als ob Sie versuchen, alles im Container zu verstecken, anstatt den Container selbst zu verstecken.

$(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> 

Hoffe, dass hilft, und ich hoffe, ich habe richtig verstanden!

Answer 2

Ich denke, es ist, weil jQuery ausgestattet ist nicht Opazität eines Drittanbieters Multimedia-Objekt zu manipulieren, auch wenn es eingebettet ist, in Standard-HTML-Markup.

Ihre beste Wette könnte nur sein, ein unsichtbares DIV mit den gleichen Dimensionen darüber zu positionieren und es dann einfach ein-/auszublenden (aber das ist reine Spekulation).

Answer 3

@dalbaeb Antwort ist wahrscheinlich die beste, aber die seltsame Sache ist es mit einigen hässlichen Fehler fehlschlägt (d ist undefiniert in jQuery 1.4 und e ist undefined in 1.5, sieht aus wie der Brocken von Code mit der Warteschlangenbehandlung verwandt ist) .

Überraschenderweise funktioniert es in jQuery 1.3!

Answer 4

Meine Lösung, obwohl es nicht genau so funktioniert, war eine Callback-Funktion in der fadIn(), um die Objekt-Tags zum div hinzuzufügen. Es bedeutet, dass das Objekt selbst nicht verblasst wird, aber ich nehme an, dass ich die Illusion haben könnte, dass Sie dem Div ein Bild hinzufügen könnten, und dann das Bild durch den Objektcode ersetzen, wenn das FadeIn abgeschlossen ist.

Answer 5

So bekomme ich das gleiche Problem. Das Ändern des wmode-Parameters auf "undurchsichtig" hat es funktioniert.