使用 jQuery 为动画添加下划线 [关闭]答案

【问题标题】：Underline animation with jQuery [closed]使用 jQuery 为动画添加下划线 [关闭]
【发布时间】：2013-03-08 15:05:01
【问题描述】：

我正在尝试在链接上悬停动画，但没有成功，这是我的代码：

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>

脚本

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

FIDDLE

我知道它看起来很糟糕，但是请帮忙！

感谢您的考虑。

【问题讨论】：

请在此处发布您的代码。

标签： jquery animation underline

【解决方案1】：

你还没有包含 jQuery 库...http://jsfiddle.net/2GJrW/4/

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

【讨论】：

是的，对不起，我真正需要的是让工作成为一个 .mouseleave，我的错。我试过这个，但每次悬停都会两次：jsfiddle.net/2GJrW/10
见this fiddle...

【解决方案2】：

可以，看到没有加载jQuery。

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

$(document).ready(function(){

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

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


            }, 500 );
        });





    });

【讨论】：