为什么 JQuery 不能正确淡化 flash 对象？答案

【问题标题】：Why does JQuery not fade a flash object properly?为什么 JQuery 不能正确淡化 flash 对象？
【发布时间】：2023-03-23 08:10:02
【问题描述】：

我正在尝试淡出 Flash 嵌入对象并淡入常规 Html。

由于某种原因，在淡出完成之前，淡出方法的回调被多次触发。结果是 Html 在回调函数中被附加了多次，并且闪烁了额外的时间。

当我尝试淡化常规 Html 时不会发生这种情况。

淡出功能是否不适用于闪光灯？

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');
        });
    });

【问题讨论】：

标签： jquery flash fade

【解决方案1】：

我认为这是因为 jQuery 无法处理第三方多媒体对象的不透明度，即使它嵌入到标准 HTML 标记中。

您最好的选择可能是在其顶部放置一个具有相同尺寸的不可见 DIV，然后将其淡入/淡出（但这只是纯粹的猜测）。

【讨论】：

【解决方案2】：

我无法准确指出问题所在，但我在这里有一个工作示例： http://jsbin.com/ayoqe

我认为它可能是您的 jquery 选择器中的星号 *？看起来好像您试图隐藏容器内的所有内容，而不是隐藏容器本身。

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

希望对您有所帮助，希望我理解正确！

【讨论】：

我试图将淡入淡出应用到 Flash 对象本身。这就是我使用星星的原因。我猜你是对的，我应该将淡入淡出应用于 FlashContainer。谢谢

【解决方案3】：

我的解决方案，虽然它的工作方式不完全相同，但在 fadIn() 中使用回调函数将对象标签添加到 div。这确实意味着对象本身没有被淡化，但我想给人一种错觉，您可以将图像添加到 div，然后在淡入完成后用对象代码替换图像。

【讨论】：

【解决方案4】：

所以我遇到了同样的问题。将 wmode 参数更改为“不透明”使其工作。

【讨论】：

【解决方案5】：

@dalbaeb 答案可能是最好的答案，但奇怪的是它失败并出现一些丑陋的错误（d 在 jQuery 1.4 中未定义，而 e 在 1.5 中未定义，看起来代码块与队列处理有关）。

令人惊讶的是，它可以在 jQuery 1.3 中使用！

【讨论】：