javascript - 通过 .animate() 更改特定的 css 样式

Question

我目前正在编写我的个人代码 website并且确实需要一些有关 jQuery 的帮助。

我希望粘性导航在通过标题部分后更改其背景颜色，为此我使用了 jQuery WayPoint 插件。

然后我为上面的内容和标题部分下面的内容定义了一些特殊的CSS。到目前为止，背景和字体颜色发生了变化，.active 类链接和 .navbar-brand 的颜色没有变化。

下面的脚本有问题吗？

$navbar.find('.navbar-brand').animate({color:'white'},500);
            $navbrand.css({font-weight:"normal"});

$navbar.find('.navbar-brand').animate({color:'white'},500);
            $navbrand.css({font-weight:"normal"});

如果是，那么我真的很感谢您能解释为什么它不起作用。

完整代码如下:

$('#navchange').waypoint(function() {
    var $navbar = $("#changenav");
    var $navbrand = $("active > a:focus");

    if($(window).scrollTop() < $('#navchange').css("top").replace("px", "")) {
        // Above
        $navbar.animate({backgroundColor:'transparent'},300);
        $navbar.find('a').animate({color:'white'},500);
        $navbar.find('.navbar-brand').animate({color:'white'},500);
        $navbrand.css({font-weight:"normal"});

    } else {
        $navbar.animate({backgroundColor:'#FFFFFF'},500);
        $navbar.find('a:link').animate({color:'#1abc9c'},500);
        $navbar.find('.navbar-brand').animate({color:'#1abc9c'},500);
        $navbrand.css({font-weight:"bold"});

    }

});

和here是我网站的链接。

Answer 1

您有一些语法错误。

您应该引用 .css 中的 css 属性。

$navbrand.css({"font-weight":"normal"});
$navbrand.css({"font-weight":"bold"});

您的 $navbrand 选择器中还缺少一个句点。

var $navbrand = $(".active > a:focus");