0

我对滑动功能有一个小问题。我想要它做的是当我将鼠标悬停在按钮上时，较暗的背景会向下滑动，覆盖整个按钮（在文本后面），文本会向上滑动一点。到目前为止我所做的是：

<nav>
    <a href="../webdesign.html"><span>01. <strong>HOME</strong></span><div></div></a>
    <a href="../webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
    <a href="../webdesign.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
    <a href="../webdesign.html"><span>04. <strong>PORTFOLIO</strong></span><div></div></a>
    <a href="../webdesign.html"><span>05. <strong>ABOUT US</strong></span><div></div></a>
    <a href="../webdesign.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
</nav>

jQuery：

$("nav a").mouseenter(function(){
      $('div', this).slideDown(200);
      $("nav a").css('padding-top', '5px');
}).mouseleave(function() {
      $('div', this).slideUp(500);
      $("nav a").css('padding-top', '25px');
});

CSS：

    nav{
        height:65px;
        font-family: moderne, Verdana, Geneva, sans-serif;
        font-size:0.9em;
        overflow:hidden;
    }

    nav a{
        background-color:rgba(000,000,000,0.1);
        border-bottom:1px solid #fff;
        border-top:1px solid #666;
        display:block;
        float:left;
        padding: 25px 0 0 10px;
        width: 144px;
        height:65px;
        color:#ffd100;
        font-size: 1em;
        margin: 0 2px;
        border-right: solid 1px #fff;
        border-left: solid 1px #666;
        -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset;
        -moz-box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset;
        box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset;
        position:relative;
    }

    nav a strong{
        font-weight:normal;
        color:#333;
    }

    nav div{
        position:absolute;
        top:0;
        left:0;
        float:left;
        width:144px;
        background-color: rgba(0, 0, 0, .5);
        color:#ddd;
        padding:5px;
        margin-top: 0px;
        border-bottom:1px solid #999;
        font-size:15px; 
        display:none;
    }

我知道 jquery 有点灾难，但我尝试了很多东西，我是 jquery 的初学者。jsFiddle 这里：jsFiddle 谢谢你的帮助。

4

1 回答 1

1

看到这个：http: //jsfiddle.net/bFFhk/2/

$("nav a").mouseenter(function () {
    $('div', this).slideDown(200);
    $(this).css('padding-top', '5px');
}).mouseleave(function () {
    $('div', this).slideUp(500);
    $(this).css('padding-top', '25px');
});

这增加了一点动画：http: //jsfiddle.net/bFFhk/3/

于 2013-02-15T11:15:22.630 回答