IE中的jQuery动画分层问题

Posted 2023-05-08

【中文标题】IE中的jQuery动画分层问题

【英文标题】：jQuery animate layering issue in IE

【发布时间】：2010-10-16 09:54:57

【问题描述】：

如果您将鼠标悬停在<img> 上，“hiddenPanel”<div> 将会出现。这在 FF 和其他浏览器中运行良好，但在 IE 中，<div> 出现在“内容”<div> 后面。我试过 z-indexing 无济于事。其他人有这个问题吗？

（另外，出于布局原因，我不会在“内容”<div> 之后移动代码）

编辑：更多代码； jQuery / html / CSS ...

jQuery

​​>

    /* Column Left #1 */      
    $('.columnLeft_spec1_panel').hide().css('opacity','0.0');
    $('.columnLeft_spec1').mouseover( function()  $('.columnLeft_spec1_panel').animate( width: '337px', height: '234px', opacity: 1.0 , 1250 ); );
    $('.columnLeft_spec1_panel').mouseout( function()  $('.columnLeft_spec1_panel').animate( width: '1px', height: '1px', opacity: 0.0 , 1250 ); );

HTML

<div class="columnLeft">
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec1.gif" class="columnLeft_spec1"  />
  <a runat="server" href="~/" class="columnLeft_spec1_panel">&nbsp;</a>
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec2.gif" class="columnLeft_spec2"  />
  <a runat="server" href="~/" class="columnLeft_spec2_panel">&nbsp;</a>
</div>

<div class="columnRight">
  <img runat="server" src="~/images/pc_blocks_columnRight_spec1.gif" class="columnRight_spec1"  />
  <a runat="server" href="~/" class="columnRight_spec1_panel">&nbsp;</a>
</div>

<asp:ContentPlaceHolder ID="main" runat="server"></asp:ContentPlaceHolder>

<div class="subnav">
  <asp:ContentPlaceHolder ID="subnav" runat="server"></asp:ContentPlaceHolder>
</div>

<div class="content">
  <div class="leftPanel">
    <asp:ContentPlaceHolder ID="leftPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="midPanel">
     <asp:ContentPlaceHolder ID="midPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="rightPanel">
    <asp:ContentPlaceHolder ID="rightPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
</div>

CSS

    /* CONTENT
    ======================================================================*/
    .content 
      position:relative;
      height:auto; width:800px; _width:795px;
      margin:5px 5px 0px 90px; padding:20px 10px;
      min-height:250px; z-index:0;
      background:#FFF;
    
    .leftPanel, .midPanel  float:left; 
    .rightPanel  float:left; 

    .content .leftPanel 
      height:auto; width:150px;
    
    .content .midPanel 
      height:auto; width:375px;
      border-right:solid 1px #78A22F;
      padding:0px 30px 30px 30px;
    
    .content .rightPanel 
      height:auto; width:180px;
      padding:0px 0px 0px 20px;
    

    /* COLUMNS
    ======================================================================*/
    .columnLeft, .columnRight 
      height:245px; width:85px;
      background:#EEEEEE;
      margin-top:5px; position:relative;
    
    .columnLeft 
      float:left; background:url(../images/pc_blocks_columnLeft.gif) no-repeat;
    
    .columnLeft .columnLeft_spec1 
      position:absolute;
      top:0px; right:0px;
    
    .columnLeft .columnLeft_spec1_panel 
      display:none; background:url(../images/pc_columnLeft_spec1.jpg) no-repeat;
      position:absolute; z-index:5;
      left:0px;
    

【问题讨论】：

你能提供你的 CSS 和 jQuery 代码吗？

【参考方案1】：

建议：检查你的 CSS！有些事情在 FF 中运行良好，但在 IE 中您必须重做大部分事情，因为我们都知道 IE 在遵循 W3C 标准时是一个大问题。

这是我做的一个演示：

$(document).ready(function () 
    
        $(".hoverMe").mouseover(function ()
        
            $(".hiddenPanel").fadeIn('slow');
        ).mouseout(function ()
        
            $(".hiddenPanel").fadeOut('slow');
        );
    );

这是html：

<img class="hoverMe"  /> <div class="hiddenPanel" style="display: none; color: blue; font-size: 20px; font-weight: bold;">This is the hidden panel</div> 
    <div class="content" style="color: red;">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

您也可以尝试上面的代码this demo，它可以在 IE 中按预期工作。

【讨论】：

您的演示将内容向下推送。我的面板应该出现在内容之上，而不是推送任何内容。

HTML 发生了一些变化。现在它不推送任何东西，只是在内容之上。这就是你要找的东西？

所以我认为我的问题可能是，由于内容是通过 ASP 动态添加的，它在 jQuery 之后呈现，因此以某种方式将其置于顶部。也许我错了……

【参考方案2】：

内容 div 是否包含 Flash 文件？

如果是，那么你需要检查this question，它有你的解决方案。

如果您可以发布您的 jQuery 代码和您正在使用的 CSS，那将有很大帮助。