android 手机上的淡入淡出 div

Question

我正在尝试使用 javascript 在 360° 全景图上显示包含内容的 div。 它在 IE、Firefox、Safari、Iphone、Ipad 和 android 3（平板电脑）上完美运行，但在 android mobile (2.3.3) 上无法正常运行。

从我的全景图中，我调用了一个 javascript 函数来淡入一个具有绝对位置和 display:none 的 div。

这里是javascript

function ouvrirDiv(divnum){
$('#wrapper'+divnum).fadeIn("slow");}
function fermerDiv(divnum){
    $('#wrapper'+divnum).fadeOut("slow");}

这是我的html

<div id="pano">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>


<script type="text/javascript">
// <![CDATA[

    var swf = createswf("nantes.swf", "krpanoSWFObject", "100%", "100%");
    swf.addVariable("xml", "nantes.xml");
    swf.addParam("wmode","opaque");
    swf.embed("pano");

// ]]>

    </script>
</div>



<div id="wrapper1"><div id="scroller">
<div class="closetop"><a href="javascript:" onClick="fermerDiv(1)">Fermer</a></div>
<div class="closebottom"><a href="javascript:" onClick="fermerDiv(1)">Fermer</a></div>
<div id="tabContainer1">
    <div class="tabs">
      <ul>
        <li id="tabHeader_1">Texte</li>
        <li id="tabHeader_2">Photos</li>
        <li id="tabHeader_3">Vidéos</li>
      </ul>
    </div>
<div class="tabscontent">

<div class="tabpage" id="tabpage_1">  
Texte...
</div>

<div class="tabpage" id="tabpage_2">
Photos...
</div>

<div class="tabpage" id="tabpage_3">
Videos...
</div>

</div>

</div>
</div>
</div>

还有 CSS

* {
margin:0;
padding:0;
}

@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
        html { height:100%; }
        body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000;   -webkit-user-select:none; -webkit-text-size-adjust:none; }

#pano {
width:100%; height:100%; position:absolute; top:0px; left:0px;
}

#wrapper1 , #wrapper2 , #wrapper3 , #wrapper4 , #wrapper5 {
    position:absolute;
    top:0px; bottom:-60px; left:0px;
    width:100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    overflow:auto;
    display:none;
}

#scroller {
    position:relative !important; 
    margin:0 auto;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    max-width: 600px;
    background:transparent;
    color: #fff;
    margin-bottom: 60px;
    text-align: justify;
}

这是默认 android 浏览器上的行为：包装器 div 已打开但停留在全景图后面。 在 Opera 移动设备上，除非您调用包装器 div，否则无法滚动全景图，但随后包装器位于全景图上方（这是正确的），但您无法滚动它，您可以改为滚动全景图...

我真的不知道这个问题... 如果有人有想法，非常感谢！！！

我的测试页在那里：http://www.360images.fr/nantes/nantes.html

Answer 1

我也有这个问题。对我来说添加

.hide() 

之前到

$('divelement').fadein 

有效。