jQuery .animate（）不工作，无法弄清楚原因

Question

所以我试图使用jQuery动画对导航栏的一些更改。其他所有像.css（）或.append（）的工作方式与我尝试使用的方法完全相同.animate（）但是没有得到任何响应。任何帮助将不胜感激。

以下是我试图制作动画的HTML：

<nav class="navbar navbar-custom" id="navbar">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topNav">
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>

            <a href="index.html" class="navbar-brand">A1 Auto Care</a>

        </div>
        <div class="collapse navbar-collapse text-right" id="topNav">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Home</a></li>
                <li><a href="#Services">Services</a></li>
                <li><a href="#About">About</a></li>
                <li><a href="#Contact">Contact</a></li>
                <li><a href="#visit:facebook" id="facebookBtn" class="text-center"><span id="facebookLogo" class="fa fa-facebook"></span></a></li>
            </ul>
        </div>
    </nav>

这是我的jQuery：

    $(window).on( "scroll", function(){

    if($(document).scrollTop() >= 10){
        $('#navbar').animate({border:"2px solid red"}, 300);
    }
});