jQuery下拉动画子导航无法在IE中工作

时间：2011-01-07 00:39:17

标签： jquery internet-explorer-7 hover jquery-animate

我有一个动画下拉菜单，带有动画的subnavs，可以在FF，Chrome，Safari中运行得很漂亮......但是，当然，IE很难。此时，我只建立了产品菜单。

我正在使用.hover和.animate来扩展包含子菜单项的div的宽度。

当您将鼠标悬停在“产品”下的某个子菜单项上时，另一个子菜单会向右侧拍摄更多项目。

在IE浏览器中，我可以获得第一个子菜单，如果我真的很快就将它鼠标移除。即便如此，它似乎只是想要部分动画。此外，我的子菜单项似乎都没有接受他们的a：悬停样式。

有什么想法吗？

这是一个链接：http://www.saundersintegrated.com/us_armor/new_site/home_1_6_test.html

CSS：

/* PRODUCTS */
#menuProducts{
 position:absolute;
 display:block;
 top:129px;
 right:315px;
 padding-top:7px;
 padding-bottom:7px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 color:#999;
 cursor:pointer;
 z-index:50;

}

#menuProducts a{
 color:#999;
}

#menuProducts a:hover{
 color:#FFF;
}

#drawerProducts{
 position:absolute;
 display:block;
 top:159px;
 right:45px;
 width:705px;
 background-color:#000;
 overflow:hidden;
 /* for IE */
   filter:alpha(opacity=85);
  /* CSS3 standard */
  opacity:0.85;
 z-index:50;
}

#insideDrawerProducts1{
 position:absolute;
 display:block;
 top:5px;
 left:10px;
 height:30px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 float:left;
 padding-right:10px;
 border-right: thin #333 solid;
 z-index:5;
}

#insideDrawerProducts1 a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
}

#insideDrawerProducts1 a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFF;
}

#insideDrawerProducts2{
 position:relative;
 display:block;
 top:5px;
 left:10px;
 height:30px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 float:left;
 padding-left:10px;
 z-index:5;

}

#insideDrawerProducts2 a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
}

#insideDrawerProducts2 a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFF;
}

#featuredProjectImage{
 position:absolute;
 display:block;
 top:0px;
 left:20px;
 z-index:5;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#999;

}

#featuredProjectImage a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;

}

#featuredProjectImage a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#fff;

}


#featuredProjectText{
 position:absolute;
 display:block;
 top:45px;
 left:170px;
 width:150px;
 z-index:5;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#ccc;

}

#productsMenuMain{
 position:absolute;
 display:block;
 top:0px;
 left:340px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 border-right:thin solid #000;
 border-left:thin solid #000;
 overflow:hidden;
 z-index:5;

}

#productsMenuSubmenu{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:3px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;
}

#productsMenuSubmenu a{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#ccc;
}

#productsMenuSubmenu a:hover{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#000;
 background-color:#F60;
}


#productsMenuConcealable{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuTacticalVests{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}


#productsMenuTacticalAccessories{
 position:absolute;
 display:block;
 top:0px;
 left:583px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuCorrectional{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuInternational{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuEOD{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuSubmenu2{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:3px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;
}

#productsMenuSubmenu2 a{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#ccc;
}

#productsMenuSubmenu2 a:hover{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#000;
 background-color:#F60;
}

HTML：

<!--PRODUCTS MENU-->
<div id="menuProducts"><a href="#"><span>PRODUCTS</span></a></div>

<div id="drawerProducts">

<div id="insideDrawerBorder">

<div id="featuredProjectImage">
<h1>Featured Product</h1>
<img src="images/featured_product_1.png" />
<br /><br />
<a href="#"><span>>&nbsp;learn more</span></a>
</div>

<div id="featuredProjectText">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
</div>

<div id="productsMenuMain">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Concealable"><span>Concealable</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Tactical"><span>Tactical</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Correctional"><span>Correctional</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="International"><span>International</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="EOD"><span>EOD/Specialty</span></a></div>
</div>

<div id="productsMenuConcealable">
<br />
<div id="productsMenuSubmenu"><a href="#" name="USA_Classic"><span>USA Classic</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Terminal_Velocity"><span>Terminal Velocity</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="XLT"><span>XLT</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="XP"><span>XP</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="New_Model"><span>New Model</span></a></div>
</div>

<div id="productsMenuTacticalVests">
<br />
<div id="productsMenuSubmenu">VESTS</div>
<div id="productsMenuSubmenu"><a href="#" name="TAV"><span>TAV</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Cover_Plus"><span>Cover Plus</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="MSTV"><span>MSTV</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="GET"><span>GET</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Narco"><span>Narco</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="New_Tactical"><span>New Tactical</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Flotation_Tactical"><span>Flotation Tactical</span></a></div>
</div>

<div id="productsMenuTacticalAccessories">
<br />
<div id="productsMenuSubmenu2">ACCESSORIES</div>
<div id="productsMenuSubmenu2"><a href="#" name="Helmets"><span>Helmets</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Plates"><span>Plates</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Shields"><span>Shields</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="GET"><span>GET</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Pockets_and_Pouches"><span>Pockets and Pouches</span></a></div>
</div>

<div id="productsMenuCorrectional">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Concealable_Correctional"><span>Concealable Correctional</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Tactical_Correctional"><span>Tactical Correctional</span></a></div>
</div>

<div id="productsMenuInternational">
<br />
<div id="productsMenuSubmenu"><a href="#" name="PFA"><span>PFA</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="PASGT"><span>PASGT</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Peace_Keeper"><span>Peace Keeper</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Rapid_Response"><span>Rapid Response</span></a></div>
</div>

<div id="productsMenuEOD">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Breacher_Blanket"><span>Breacher Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Bomb_Blanket"><span>Bomb Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Ballistic_Blanket"><span>Ballistic Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Custom_Panels"><span>Custom Panels</span></a></div>
</div>

<!--END insideDrawerBorder-->
</div>

<!--END PRODUCTS MENU-->
</div>

JQUERY：

$(document).ready(function() {

var minDrawerHeight = 0;
var maxDrawerHeight = 250;

$('#drawerProducts').css('height',minDrawerHeight);



<!--------------------------- MENU --------------------------->


<!--- MENU DROPDOWN --->


$('#menuProducts, #drawerProducts').hover(function(){
  $('#drawerProducts').stop().animate({'height': maxDrawerHeight}, 400, 'swing');
   },
   function(){

$('#drawerProducts').stop().animate({'height': minDrawerHeight}, 400, 'swing')

});





<!--- PRODUCTS SUBMENUS --->

var minMenuWidth = 0;
var maxMenuWidth = 120;

$('#productsMenuConcealable').css('width',minMenuWidth).hide();
$('#productsMenuTacticalVests').css('width',minMenuWidth).hide();
$('#productsMenuTacticalAccessories').css('width',minMenuWidth).hide();
$('#productsMenuCorrectional').css('width',minMenuWidth).hide();
$('#productsMenuInternational').css('width',minMenuWidth).hide();
$('#productsMenuEOD').css('width',minMenuWidth).hide();


$("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable'], #productsMenuConcealable").hover(function(){
 $('#productsMenuConcealable').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuConcealable').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical'], #productsMenuTacticalVests, #productsMenuTacticalAccessories").hover(function(){
 $('#productsMenuTacticalVests, #productsMenuTacticalAccessories').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuTacticalVests, #productsMenuTacticalAccessories').stop().animate({'width': minMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional'], #productsMenuCorrectional").hover(function(){
 $('#productsMenuCorrectional').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuCorrectional').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='International'], #productsMenuInternational").hover(function(){
 $('#productsMenuInternational').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='International']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuInternational').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='International']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='EOD'], #productsMenuEOD").hover(function(){
 $('#productsMenuEOD').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='EOD']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuEOD').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='EOD']").css({'background': 'none', 'color':'#ccc'});
});



<!--END DOC READY-->
});

2 个答案:

答案 0 :(得分：0)

看看这个

http://www.xs4all.nl/~peterned/csshover.html

答案 1 :(得分：0)

更新：事实证明罪魁祸首是有一个div，不透明度滤镜嵌套在另一个也有不透明度滤镜的div中。

相关问题
最新问题