Question

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

<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 谢谢你的帮助。

Answer 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/

在鼠标悬停事件中向上滑动文本和向下滑动背景

1 个答案: