Animate jQuery method of swapping classes of a navbar div

I have a bootstrap navbar defined in HTML/CSS as below. When the user scrolls up and down, I have the below jQuery method that changes the class of the navbar, thus making it transparent/non-transparent depending on the position of the scroll. If the user is at the top of the page, the navbar is set to be transparent.

HTML:

<div class="navbar transparent navbar-inverse navbar-fixed-top" id="navbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Marcus Jacobsson", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Projects", "Projects", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

CSS:

.navbar.transparent.navbar-inverse {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(0,0,0,0.00)),color-stop( 100%, rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

jQuery method:

$(window).scroll(function () {
    var height = $(window).scrollTop();

    if (height == 0) {
        //Use transparent navbar class
        $("#navbar").attr("class", "navbar transparent navbar-inverse navbar-fixed-top");
    } else {
        //Use default bootstrap class (non-transparent)
        $("#navbar").attr("class", "navbar navbar-inverse navbar-fixed-top");
    }
});

Question

I would like to add an animation effect when the jQuery script swap the navbar classes from transparent to non-transparent. Is there an easy way to add this animation?

As an example of what I would like to achieve, have a look at this page navigation bar. When you scroll up and down, there's an animation effect in place.