Question

我目前正致力于动画导航，我遇到了麻烦。我试图制作一个看起来像下图的导航： enter image description here

enter image description here

我似乎无法让所有元素排列正确并在悬停时同时更改颜色。使用我的JQuery，我只能让标签动画下来而不是有人可以提供帮助吗？

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>untitled</title>
<style type="text/css">

.nav{
margin: 3px 3px 0 0;
width: 103px;
position: relative;
min-height: 200px;
float:left;
bottom:-20px;
}
h2{
color:#ddd;
text-shadow:black 2px 2px 3px;
}
.subnav{
color:white;
float:bottom;
position:absolute
height:25px;
min-height:10px;
width:100px;
background: #ddd;
border: 2px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
z-index:100;
box-shadow: 10px 10px 5px black;
}
.subnav:hover a:hover .h2:hover{
background-color:black;
}




</style>
</head>
<body>
<a href="#" id="aboutlink">
<div class="nav" id="about">
<center><h2>About</h2></center>
<div  class="subnav" id="subabout">
<p id="subtxt"> Learn about<br/> us and our<br/> services  </p>
</div></div></a>

<a href="#" id="worklink">
<div class="nav" id="work">
<center><h2>Work</h2></center>
<div  class="subnav" id="subwork">
<p id="worktxt"> See our<br/> work and<br /> portfolio </p>
</div></div></a>

<a href="#" id="helplink">
<div class="nav" id="help">
<center><h2>Help</h2></center>
<div  class="subnav" id="subhelp">
<p id="helptxt"> Talk to<br/> our support  </p>
</div></div></a>

<a href="#" id="searchlink">
<div class="nav" id="search">
<center><h2>Search</h2></center>
<div  class="subnav" id="subsearch">
<p id="searchtxt">  Search our<br /> site  </p>
</div></div></a>





<script type="text/javascript"src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('#subtxt').hide();
    $('#worktxt').hide();
    $('#helptxt').hide();
    $('#searchtxt').hide();
    });

    $("#aboutlink").hover(function(){
    $("#subabout").animate({ "height": "80px"}, "slow");
    $("#subtxt").show();
    },
    function(){
    $("#subabout").animate({ "height": "10px"}, "slow");
    $("#subtxt").hide();
    });

        $("#worklink").hover(function(){
    $("#subwork").animate({ "height": "80px"}, "slow");
    $("#worktxt").show();
    },
    function(){
    $("#subwork").animate({ "height": "10px"}, "slow");
    $("#worktxt").hide();
    });

        $("#helplink").hover(function(){
    $("#subhelp").animate({ "height": "80px"}, "slow");
    $("#helptxt").show();
    },
    function(){
    $("#subhelp").animate({ "height": "10px"}, "slow");
    $("#helptxt").hide();
    });

        $("#searchlink").hover(function(){
    $("#subsearch").animate({ "height": "80px"}, "slow");
    $("#searchtxt").show();
    },
    function(){
    $("#subsearch").animate({ "height": "10px"}, "slow");
    $("#searchtxt").hide();
    });





  </script>
  </body>
  </html>

我为杂乱的编码道歉并感谢任何帮助。

Answer 1

我刚刚更新了Fiddle，也许你可以从那里开始。我添加了jquery以在<h2>上升时移动.subnavi（仅针对第一个链接 - “关于”和“工作”）。对于“工作”，我已经添加了在上升时将背景颜色设置为黑色并在下降时将其设置为灰色。由于无法仅使用jQuery.animate()为背景颜色设置动画，因此我添加了jQuery插件jquery-color：https://github.com/jquery/jquery-color作为外部资源。当subnavi下降时，仅在悬停时更改背景颜色看起来不太好，但也许你更喜欢这样。
进一步调整后：

.nav h2 {
   position:absolute;
   left:10px;
}

所以h2可以动画 #worklink悬停的jQuery：

$("#worklink").hover(function () {
  $("#work h2").animate({
    "top": "-70px"
  }, "slow");
  $("#subwork").animate({
    "height": "80px",
    "background-color": "black"
  }, "slow");
  $("#worktxt").show();
  },

  function () {
    $("#work h2").animate({
    "top": "0px"
    }, "slow");
    $("#subwork").animate({
    "height": "10px",
    "background-color": "#ddd"
    }, "slow");
  $("#worktxt").hide();
});

我还为padding-top添加了一些body，因此有足够的空间让.subnav进入小提琴。

有关动画和背景颜色的参考：http://api.jquery.com/animate/，“动画属性和值”部分。

JQuery动画导航

1 个答案: