Javascript 带jquery的边框底部动画

我正在尝试用jquery创建一个边框底部动画，但没有成功。有什么建议吗

jQuery代码

HTML代码

品牌广告
标识
打印
事件
web

我找到了答案：

答案的例子是

信用证：：

CSS

jQuery

---

请尝试此代码。这肯定会奏效的。实际上，您使用的是mosout事件，而不是mouseleave（）

---

如果可以，请阅读mouseleave（）的用法。

可能重复@johncode我测试了这段代码，它的优点是存在问题，jquery和setTimeout不适用于css动画/效果重要！你必须包括这项工作。

$("#navigation ul li span").hover(function(){
    $(this)
       .delay(5000)
       .css("border-bottom-color", '#FFF')
       .css("border-bottom-style","solid")
       .css("border-bottom-width","1px");
}

$("#navigation ul li span").mouseout(function(){
    $(this).css("border","");
});

  <nav id="navigation">
    <ul>
      <li data-tab-item="sliders" class="current"><span class="tabcurrent">BRAND ADVERTISING</span></li>
      <li data-tab-item="identity"><span>IDENTITY</span></li>
      <li data-tab-item="print"><span>PRINT</span></li>
      <li data-tab-item="events"><span>EVENTS</span></li>
      <li data-tab-item="web"><span>WEB</span></li>
      <li data-tab-item="bannerAds"><span>BANNER ADS</span></li>
    </ul>
  </nav>

$("#navigation ul li span").hover(function() {
    $(this).delay(2000).queue(function(next) {
        $(this)
            .css("border-bottom-color", '#000000')
            .css("border-bottom-style", "solid")
            .css("border-bottom-width", "1px");
    });
});
$("#navigation ul li span").mouseout(function() {
    $(this).css("border", "");
});​

#navigation ul li span {
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-color: red
}

$("#navigation ul li span").hover(function() {
    $(this).animate({
        "border-bottom-width": "2px"
    }, 2000)
}, function() {
    $(this).stop().animate({
        "border-bottom-width": "0px",
        "border-color" : ""
    }, 2000);
});

$(document).ready(function () {

        $("#navigation ul li span").live("hover", function () {
            $(this).delay(5000)
   .css("border-bottom-color", 'red')
   .css("border-bottom-style", "solid")
   .css("border-bottom-width", "1px");
        });

        $("#navigation ul li span").live("mouseleave", function (e) {

            if ($(this).css('border-bottom-color') == 'rgb(255, 0, 0)') {
                $(this).css("border-bottom-color", "white");

            }

        });


    });