5

私はこのhtmlコードを持っています

<nav id="mainNav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>        
    </ul>
</nav>

それはこれのcssスタイルを持っています

    #mainNav { display:block; padding:5px; }
    #mainNav ul { display:block; list-style-type:none; width:500px; border-collapse:collapse; }
    #mainNav li { display:inline-block; width:100px; height:66px; text-align:center; padding-top:10px; float:left; background-color:gray; cursor:pointer; border-bottom:0px solid red; }
    #mainNav a { color:white; text-decoration:none; text-transform:capitalize; }
    #mainNav a.aHover { color:red; }

これに添付されているのは JQuery コードです

$(document).ready(function() {
$('#mainNav li').mouseover(function() {
    var el = $(this);
    $(this).animate({
    "border-bottom-width":"+=5px"
    },{ queue: false, duration: 500 }, function() {
    el.css('border-bottom-width', '5px');   
    });
    $(this).children('a').addClass('aHover');
});
$('#mainNav li').mouseout(function() {
    var el = $(this);
    $(this).animate({
    "border-bottom-width":"-=5px"
    },{ queue: false, duration: 500 }, function() {
    el.css('border-bottom-width', '0px');   
    });
    $(this).children('a').removeClass('aHover');
});
});

今私がやりたいことは、境界線の色を赤にフェードインしてフェードアウトするか、コードに書かれているように、ホバー時に境界線を最大5pxまで拡大してから、境界線を0pxに収縮させることです。

質問は、ご覧のとおり、境界線が最大幅または最小幅になるように、アニメーションの最後で LI 要素のクラスを変更しようとしていますが、うまくいかないのはなぜですか?

境界線の色をどのようにフェードインおよびフェードアウトしますか?

4

1 に答える 1

4

以下を試してください、

デモ

$(document).ready(function() {
    $('#mainNav li').hover(function() {
        var el = $(this);
        $(this).stop(true, true).animate({
            "border-bottom-width": "5px"
        }, {
            queue: false,
            duration: 500
        });
        $(this).children('a').addClass('aHover');
    }, function() {
        var el = $(this);
        $(this).stop(true, true).animate({
            "border-bottom-width": "0px"
        }, {
            queue: false,
            duration: 500
        });
        $(this).children('a').removeClass('aHover');
    });
});

かわった、

  1. mouseovermouseenterあなたの場合により適切であるようにイベントに
  2. に変更mouseenter/mouseleaveされましたhover
  3. +=5px、-=5pxを5px、に変更しました0px。
  4. .stop(true, true)アニメーションが完了し、キューがクリアされていることを確認するために追加されました。
于 2012-04-27T18:02:10.513 に答える