动画 jQuery 交换导航栏类的方法 div

Question

我在 HTML/CSS 中定义了一个 bootstrap 导航栏，如下所示。当用户向上和向下滚动时，我有下面的 jQuery 方法来更改导航栏的 class，从而根据滚动的位置使其成为 transparent/non-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方法：

$(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");
    }
});

问题

我想在 jQuery 脚本将导航栏 class 从透明切换为不透明时添加动画效果。有没有简单的方法来添加这个动画？

作为我想要实现的示例，请查看 this page navigation bar。当您上下滚动时，会出现动画效果。

Answer 1

抱歉回答晚了。我会通过以下方式解决这个问题：

在您的 jquery 中添加一个新的 class，以便导航栏何时变为非透明：

$("#navbar").attr("class", "navbar navbar-inverse navbar-fixed-top navbar-transition");

现在为导航栏添加转换：

.navbar.transparent.navbar-inverse {
    -webkit-transition:background-color 0.5s linear; 
}

.navbar-transition {
    -webkit-transition:background-color 0.5s linear; 
}

这里有一个 fiddle 来展示它是如何工作的：

http://jsfiddle.net/3urgjsbd/

请注意 -webkit-transistion 仅适用于基于 Chrome 的浏览器，您需要添加其他前缀：

-webkit-transition
-moz-transition
-o-transition
transition

看这里：https://css-tricks.com/almanac/properties/t/transition/

希望对您有所帮助。

动画 jQuery 交换导航栏类的方法 div

Animate jQuery method of swapping classes of a navbar div

html

css

jquery

asp.net-mvc-5

twitter-bootstrap-3

问题

动画 jQuery 交换导航栏 类 的方法 div

Animate jQuery method of swapping classes of a navbar div

html

css

jquery

asp.net-mvc-5

twitter-bootstrap-3

问题

动画 jQuery 交换导航栏类的方法 div