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

  
4
mogelijk duplicaat van borderbottom-animatie met jQuery
toegevoegd 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 de auteur gabeio, de bron
Belangrijk! U moet jQuery UI gebruiken om dit te laten werken.
toegevoegd de auteur TheodorosPloumis, de bron

3 antwoord

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

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

0
toegevoegd

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

0
toegevoegd