animatie onderrand met jQuery

Question

animatie onderrand met jQuery

Ik probeer een grensbodemanimatie met jQuery te maken, ik heb tevergeefs geprobeerd. Enige suggestie?

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

  
    
      BRAND ADVERTISING
      IDENTITY
      PRINT
      EVENTS
      WEB
      BANNER ADS

4

toegevoegd 24 juni 2012 op 04:34 de auteur karlelizabeth bewerkt 24 juni 2012 op 05:52

Bekeken: 4

de bron

mogelijk duplicaat van borderbottom-animatie met jQuery

toegevoegd 24 juni 2012 op 05:23, de auteur John Conde, de bron

@JohnConde Ik heb deze code getest, het heeft de verdienste dat er een probleem is en jQuery en setTimeout werken niet voor een css-animatie/-effect

toegevoegd 24 juni 2012 op 05:33, de auteur gabeio, de bron

Belangrijk! U moet jQuery UI gebruiken om dit te laten werken.

toegevoegd 13 december 2013 op 01:14, de auteur TheodorosPloumis, de bron

3 antwoord

de auteur thecodeparadox · Answer 1 · 2012-06-24T06:46Z

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

de auteur Naveen Chandra Tiwari · Answer 2 · 2012-06-27T04:41Z

Probeer alstublieft deze code. Dit zal zeker werken. Eigenlijk gebruikte je de mosout-gebeurtenis in plaats van 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");

            }

        });


    });

Als dit werkt, lees dan het gebruik van mouseleave ().

de auteur gabeio · Answer 3 · 2012-06-24T06:03Z

Ik heb het antwoord gevonden:

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