为什么JQuery不能正确地淡入Flash对象？ [英] Why does JQuery not fade a flash object properly?

问题描述

我试图淡出一个Flash嵌入对象，并淡入正常的Html。

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

当我尝试淡入普通的Html时，不会发生这种情况。

p>

淡出功能是否不适用于flash？

Html：

 < a id =HideFlashhref =＃>隐藏Flash< / a> 
< div id =FlashContainer> 
< object classid =clsid：d27cdb6e-ae6d-11cf-96b8-444553540000codebase =http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9 ，0,0,0
 width =100height =50id =TESTalign =middle> 
< param name =allowScriptAccessvalue =sameDomain/> 
< param name =allowFullScreenvalue =false/> 
< param name =movievalue =demo_banner.swf/> 
< param name =qualityvalue =high/> 
< param name =bgcolorvalue =＃ffffff/> 
< param name =wmodevalue =transparent> 
  align =middleallowcriptaccess =sameDomainallowfullscreen =falsetype =application / x-shockwave-flash
 pluginspage =http://www.macromedia.com/go/getflashplayer/> 
< / object> 
< / div> 
< div id =RegularContent> 
< h1>淡化之前< / h1> 
< / div> 
  

JQuery：

点击（函数（）{
$（'＃FlashContainer *'）。fadeOut（'slow'，function（）{$（$＃$） b
$ b $（'＃FlashContainer'）。append（< p style ='display：none;'>这是在flash容器中< / p>）;
$ '#FlashContainer p'）。fadeIn（'slow'）;
}）;

$（'＃RegularContent *'）。fadeOut（'slow'，function（）{

$（'＃RegularContent'）。append（< p style ='display：none;'>这是在淡入淡出之后的常规内容）;
$ （'#RegularContent p'）。fadeIn（'slow'）;
}）;
}）;

解决方案

但我有一个工作的例子：
http://jsbin.com/ayoqe

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

  $（document）。 ready（function（）{
 
 $（'＃RegularContent'）。hide（）; //隐藏加载的常规内容
 $ b $（'＃HideFlash'）。点击（函数（）{
 $（'＃FlashContainer'）。fadeOut（'slow'）; //淡出flash容器
 $（'＃RegularContent'）。fadeIn（'slow'） ; //淡入正规内容
 return false; 
}）; 
 
}）; 
 
 
< a id =HideFlashhref =＃>隐藏Flash< / a> 
< div id =FlashContainer> 
< object width =425height =344>< param name =movievalue =http://www.youtube.com/v/AlPqL7IUT6M&hl=zh-TW&fs= 1&>< / param>< param name =allowFullScreenvalue =true>< / param>< param name =allowscriptaccessvalue =always>< / param> < embed src =http://www.youtube.com/v/AlPqL7IUT6M&hl=zh-TW&fs=1& type =application / x-shockwave-flashallowscriptaccess =alwaysallowfullscreen =truewidth =425height =344>< / embed>< / object> 
< / div> 
< div id =RegularContent> 
< h1>淡化之前< / h1> 
< / div> 
  

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

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

解决方案

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!

这篇关于为什么JQuery不能正确地淡入Flash对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！