的onmouseover jQuery的.animate（）

我试图实施的onmouseover jQuery的.animate（）的作用。基本上，我有一个导航div，旁边是一个隐藏的（不透明度：0）div。我试图使用jquery方法.animate（）使隐藏的div（一个子菜单）在其中一个选项悬停时出现。的onmouseover jQuery的.animate（）

的代码行是在这里：

<li class="b1" onmouseover="function(){$(".subnav1").animate({opacity:1,left:'270px'}, 250, function(){});">

完整的代码是在这里（包括CSS）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>BEAN - main</title> 
<link rel="stylesheet" type="text/css" href="css/share.css" /> 
<script type="text/javascript" src="js/jquery.1.7.2.js"></script> 
<style> 
body { 
    min-width:960px; 
} 
.container{ 
    position:absolute; 
    left:50%; 
    width:960px; 
    margin-left:-480px; 
} 
.topbar{ 
    width:960px; 
    height:10px; 
    background-color:#000; 
    margin-top:-10px; 
    margin-bottom:5px; 
} 
.logo{ 
    position:absolute; 
    margin-top:15px; 
    width:140px; 
    height:140px; 
    float:left; 
    margin-left:10px; 
} 
.mainnav{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:160px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
} 
.subnav1{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:290px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
    opacity:0; 
} 
.subnav2{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:290px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
    opacity:0; 
} 
.subnav3{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:290px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
    opacity:0; 
} 
.language{ 
    position:absolute; 
    margin-top:15px; 
    left:740px; 
    width:220px; 
    margin-right:10px; 
    height:140px; 
    float:left; 
} 
ul{ 
    margin:0px; 
    padding:0px; 
    list-style:none; 
} 
li{ 
    display:list-item; 
    text-align:left; 
} 
A:link { 
    text-decoration: none; 
    color: black; 
} 
A:visited { 
    text-decoration: none; 
    color: black; 
} 
A:active { 
    text-decoration: none; 
    color: black; 
} 
A:hover { 
    text-decoration: none; 
    color: red; 
} 
</style> 
</head> 

<body> 
<div class="container"> 
    <div class="topbar"></div> 
    <div class="logo"><img src="images/logo.png" width="140px" height="140px" /></div> 
    <div class="mainnav"> 
     <ul> 
      <li class="b1" onmouseover="function(){$(".subnav1").animate({opacity:1,left:'270px'}, 250, function(){});"> 
       <a href="#">about me</a> 
      </li> 
      <li class="b2"> 
       <a href="#">photography</a> 
      </li> 
      <li class="b3"> 
       <a href="#">urban planning</a> 
      </li> 
      <li class="b4"> 
       <a href="#">graphic design</a> 
      </li> 
      <li class="b5"> 
       <a href="#">my blog</a> 
      </li> 
     </ul> 
    </div> 
    <div class="subnav1"> 
     <ul id="sub1"> 
      <li> 
       <a href="#">Facts</a> 
      </li> 
      <li> 
       <a href="#">Values</a> 
      </li> 
     </ul> 
    </div> 
    <div class="subnav2"> 
     <ul id="sub2"> 
      <li> 
       <a href="#">Photostream</a> 
      </li> 
      <li> 
       <a href="#">The Map</a> 
      </li> 
     </ul> 
    </div> 
    <div class="subnav3"> 
     <ul id="sub3"> 
      <li> 
       <a href="#">Essay Collection</a> 
      </li> 
      <li> 
       <a href="#">The City Project</a> 
      </li> 
     </ul> 
    </div> 
    <div class="language"> 
    blah 
    </div> 
</div> 
</body> 
</html>

来源

2012-07-06 Bryan Wong

这可以通过CSS来解决，除非需要使用jquery。 – Dips 2012-07-06 05:09:21

这里是一个快速的解决方案。 Demo here

对于最佳实践使用HTML类似这样的标记。

<div class="mainnav"> 
     <ul> 
      <li class="b1"> 
       <a href="#">about me</a> 
       <ul id="sub1"> 
      <li> 
       <a href="#">Facts</a> 
      </li> 
      <li> 
       <a href="#">Values</a> 
      </li> 
     </ul> 
      </li> 
      <li class="b2"> 
       <a href="#">photography</a> 
       <ul id="sub2"> 
      <li> 
       <a href="#">Photostream</a> 
      </li> 
      <li> 
       <a href="#">The Map</a> 
      </li> 
     </ul> 
      </li> 
      <li class="b3"> 
       <a href="#">urban planning</a> 
      </li> 
      <li class="b4"> 
       <a href="#">graphic design</a> 
      </li> 
      <li class="b5"> 
       <a href="#">my blog</a> 
      </li> 
     </ul> 
    </div>

此代码的工作，以显示隐藏子菜单

$(".mainnav li").hover(function() { 
    $(this).children('ul').fadeIn(); 
}).mouseleave(function() { 
    $(this).children('ul').fadeOut(); 
});

来源

2012-07-06 05:18:17 Dips

嗯.....它似乎没有工作。我的脚本只是在的底部......您能否在第一篇文章中提供的代码中显示实现？谢谢！ – 2012-07-08 04:11:15

的onmouseover jQuery的.animate（）

回答

相关问题