CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-animate
Raphael Lechner
Raphael Lechner

Reputation: 53

Change specific css styles through .animate()

I am currently coding my personal website and could really need some help with the jQuery.

I wanted the sticky navigation to change it's background color once it passes the header section, for that I've used the jQuery WayPoint plugin.

Then I defined some special css for the content above and the content under the header section. So far the background and font color changes, the .active class link and the color of the .navbar-brand however doesn't change.

Is something wrong in the following script?

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

If yes, then I'd really appreciate a explanation why it is not working.

Here is the full code:

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

    }

});

And here is a link to my website.

Upvotes: 0

Views: 86

Answers (1)

Derek
Derek

Reputation: 3435

You have some syntax errors.

You should quote the css attributes in .css.

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

You are also missing a period in your $navbrand selector.

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

Upvotes: 2

Related Questions