jQuery fade in active element, fade out inactive elements

Question

Update

Using:

$(event.currentTarget).fadeTo(0, 1);

Seems to work, while using:

$('.btn .active').fadeTo(0, 1);

Does not. Any idea why?

The Code

jsFiddle link here: http://jsfiddle.net/SeanKilleen/fwerK/

JavasScript code below:

var global_loggedOnUser = "User1";

$(document).ready(function () {

    var viewmodel = (function () {
        this.feedbacktype = ko.observable("None");
        this.currentPage = ko.observable(location.href);
        this.currentUsername = global_loggedOnUser;

        this.updateFeedbackType = function (item, event) {
            var newText = $(event.currentTarget).children("span").text();
            $('#buttonList button').removeClass('active');
            $(event.currentTarget).addClass('active');

            feedbacktype(newText);
            $('.btn').not('.active').fadeTo('fast', 0.3);
            $('.btn .active').fadeTo('fast', 1);
        };



        return {
            pageUserIsOn: currentPage,
            theUser: currentUsername,
            feedbackType: feedbacktype
        };
    })();


    ko.applyBindings(viewmodel);
});

The Goal

• I have a list of buttons.
• When someone clicks on the button, I want to ensure the button they click on becomes 100% opacity, and the rest of the buttons become 30% capacity.

I'm trying to accomplish this by adding an "active" class to the button and removing it from all others, and then performing the fade based on class.

The Issue

• The first click, it works as expected. The clicked button is at 100% opacity and all others fade.
• The second time, the previously highlighted element fades, but the clicked button doesn't become 100% opacity, despite being given the "active" css class.
  • I added a border-size element to the active class so I could verify this. The clicked item expands its border, but does not fade to 100% opacity.

What am I missing?

Answer 1

Remove the space between the classes, you want to select elements with both classes not .active descendants of .btn

$('.btn .active').fadeTo('fast', 1);

should be

$('.btn.active').fadeTo('fast', 1);

Updated fiddle