Question

我创建了这个site，其标题使用jQuery Ui和twitter bootstrap进行转换。我的想法是有两个类.navbar-transparent和.navbar-white，我使用jQuery Ui Effects提供的.switchClass()函数，当页面的滚动位置为n时，转换两个类中的更改在顶部。

问题是，现在的导航是，我相信技术术语是“janky”。过渡不顺畅，当从透明变为白色时，没有任何字体颜色根本不会过渡，它只会变成黑色。

这个shopify主题Retina / Austin可以很好地通过css过渡使转换顺利进行。

.header{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}

这是我的javascript代码：

mindful_matter.header = function() {
    if ($(".navbar-transparent").length == 0) return false;
    var callback = function() {
        var scrolled_val = $(document).scrollTop().valueOf();
        if (scrolled_val > 0) {
            $(".navbar").switchClass("navbar-transparent", "navbar-white");
        } else {
            $(".navbar").switchClass("navbar-white", "navbar-transparent");
        }
    }
    callback();
    $(window).scroll(callback);
}

有什么方法可以让过渡更顺畅吗？使用我已经拥有的设置？当我有两个需要相互交换的类时，我可以使用css转换吗？

Answer 1

.navbar{
    transition: background-color 500ms ease;
}

平滑过渡标题导航类

1 个答案: