使用jQuery下划线动画

时间:2013-03-19 18:46:23

标签: jquery animation underline

我正在尝试使用悬停在链接上的动画但没有成功,这是我的代码:

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

我知道它看起来很糟糕,但请帮助!

感谢您的考虑。

2 个答案:

答案 0 :(得分:5)

您尚未包含jQuery库... http://jsfiddle.net/2GJrW/4/

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

答案 1 :(得分:1)

它有效,看到没有加载jQuery。

立即查看:http://jsfiddle.net/2GJrW/6/

$(document).ready(function(){

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

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


            }, 500 );
        });





    });