I am trying to create a border bottom animation with jquery, I have tried to no avail. Any Suggestion?

jQuery code

$("#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 code

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

I am trying to create a border bottom animation with jquery, I have tried to no avail. Any Suggestion?

jQuery code

$("#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 code

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

• javascript
• jquery
• html
• delay

• possible duplicate of borderbottom animation with jquery – John Conde Commented Jun 24, 2012 at 5:23
• @JohnConde I tested this code it has merit that there is a problem and jquery and setTimeout are not working for a css animation/effect – gabeio Commented Jun 24, 2012 at 5:33
• Important! You must include jQuery UI for this to work. – TheodorosPloumis Commented Dec 13, 2013 at 1:14

3 Answers 3

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

I have found the answer:

and Example of the answer is 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", "");
});​

credit::Using jQuery delay() with css()

Please try this code . This will definitely work. Actually you were using the mosout event, instead of 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");

            }

        });


    });

If this will work then please read the use of mouseleave().