使用jQuery实现底部边框动画效果

Question

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

jQuery代码

$("#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","");
});

HTML代码

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

- karlelizabeth

---

可能是使用jQuery实现border-bottom动画效果的重复问题。 - John Conde

@JohnConde 我测试了这段代码，它有价值，但是在 CSS 动画/效果中存在问题，jQuery 和 setTimeout 都无法正常工作。 - gabeio

重要提示！为了使其正常工作，您必须包含 jQuery UI。 - TheodorosPloumis

Answer 1

CSS

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

jQuery

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

- thecodeparadox

Answer 2

我找到了答案：

答案的示例在这里

$("#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", "");
});​

来源：使用 jQuery delay() 与 css() 方法

- gabeio

Answer 3

请尝试这段代码。它一定会起作用的。实际上，您使用的是mosout事件，而不是mouseleave()。

$(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");

            }

        });


    });

如果这个能够工作，那么请阅读mouseleave()的使用方法。

- Naveen Chandra Tiwari