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 に答える