带有jquery的边框底部动画答案

【问题标题】：border bottom animation with jquery带有jquery的边框底部动画
【发布时间】：2012-06-27 14:08:50
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

borderbottom animation with jquery的可能重复
@JohnConde 我测试了这段代码，它有一个问题，jquery 和 setTimeout 不适用于 css 动画/效果
重要！您必须包含 jQuery UI 才能使其正常工作。

标签： javascript jquery html delay

【解决方案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);
});

【讨论】：

【解决方案2】：

我找到了答案：

答案的例子是here

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

信用::Using jQuery delay() with css()

【讨论】：

【解决方案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() 的用法。

【讨论】：