Underline animation with jQuery

Question

I'm trying to do an animation with hover on a link without success, here's my code:

HTML

<ul>
    <li>
        <a class="border" href="#">HOME</a>
    </li>
    <li>
        <a class="border" href="#">TOUR</a>
    </li>
    <li>
        <a class="border" href="#">CONTACTUS</a>
    </li>
</ul>

SCRIPT

$(document).ready(function () {
    $(".border").hover(function () {
        $(this).animate({
            borderBottom: '2px solid #3399FF',
            width: '46%'
        }, 500);
    });
});

FIDDLE

I know it looks very bad but, please help !

I appreciate your consideration.

score 5 · Answer 1 · answered Mar 19 '13 at 18:48

5

You haven't included jQuery library... http://jsfiddle.net/2GJrW/4/

$(document).ready(function () {
    $(".border").hover(function () {
        $(this).animate({
            borderBottom: '2px solid #3399FF',
            width : '46%'
        }, 500);
    });
});

answered Mar 19 '13 at 18:48

Anujith

9,370
6
33
48

yeah sorry, what i really need is to make work a .mouseleave, my mistake. i tried this but it goes twice every hover: http://jsfiddle.net/2GJrW/10/ – novoa Mar 19 '13 at 20:32
See [this fiddle](http://jsfiddle.net/2GJrW/11/)... – Anujith Mar 20 '13 at 03:47

score 1 · Answer 2 · answered Mar 19 '13 at 18:51

It works, see that there wasn't loaded jQuery.

See now: http://jsfiddle.net/2GJrW/6/

$(document).ready(function(){

        $(".border").hover(function(){
            $(this).animate({ 

                borderBottom :'2px solid #3399FF',
                width:'46%' 


            }, 500 );
        });





    });

Underline animation with jQuery

2 Answers2