Jquery 鼠标悬停事件时上下滑动文本

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

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

css:

我知道jquery有点糟糕，但我尝试了很多东西，我是jquery的初学者。 请点击此处： 谢谢您的帮助。

请参见：

---

这增加了一点动画效果：

$（“nav a”）…css（

我感觉这不是查询造成的灾难。：）我想把它放到一个合适的div中，但我听说nav是一个常用的标记，可以代替div。这是我第一次使用nav和其他html5标记。我试图用“div”替换它，但没有给出任何结果，所以我保留了它的原样。@GungFoo谢谢你的帮助，我感谢你的时间，不幸的是，我只是这方面的初学者，它没有给我太多信息来修复什么。我有一种感觉，我所做的整个jquery可能都无法使用。您的代码只是充满了错误。在询问任何问题之前，使用javascript控制台找到它们（必要研究的一部分）。我编辑了你的问题，修正了我第一眼看到的问题。谢谢，差不多就在那里了，我怎样才能使文本流畅地向上移动，所以使用类似于向上滑动的功能？而不仅仅是跳跃？谢谢你的帮助：）欢迎。。。乐于助人……）@A.V在应用新动画之前，您应该停止动画并移除排队的动画。如果用户将鼠标悬停在元素上多次，则使用这种方法。所有排队的动画都将播放。@Jehanzeb.Malik怎么做？你能在小提琴上给我看看这个吗？非常感谢。@PiotrCiszewski这是小提琴。我使用了@A.V的小提琴，并在此基础上进行了改进。我对

nav div的脚本和css进行了更改
$("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');
});

    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;
    }

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