0

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

代码行在这里：

<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>
4

1 回答 1

0

这是一个快速的解决方案。演示在这里

为了获得最佳实践，请像这样使用 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-06T05:18:17.617 回答