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>

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); });

Answer 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()

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（）的使用。

边框底部动画与jquery

3 个答案: