KnockoutJS: затухание после затухания чего-то еще

Скажем, у меня есть набор из 3 переключателей:

<div>
    <label>
        <input type="radio" name="Who" value="Myself" 
            checked="@isMyselfChecked" data-bind="checked: who" />
        Mine
    </label>
    <label>
        <input type="radio" name="Who" value="MemberId" 
            checked="@isMemberIdChecked" data-bind="checked: who" />
        I know the member's ID
    </label>
    <label>
        <input type="radio" name="Who" value="MemberUrl" 
            checked="@isMemberUrlChecked" data-bind="checked: who" />
        I know the member's URL
    </label>
</div>

Когда пользователь выбирает первый переключатель (Mine/Myself), никаких дополнительных действий не требуется. Однако при выборе второго или третьего требуется дополнительный ввод :

<div>
    <input type="text" name="MemberId" placeholder="Enter Member ID" 
        data-bind="toggleWho: who()" style="display: none" />
    <input type="text" name="MemberUrl" placeholder="Enter Member URL" 
        data-bind="toggleWho: who()" style="display: none; width: 450px;" />
</div>

Достаточно просто иметь data-bind="visible: who() === '[MemberId|MemberUrl]'" в зависимых текстовых полях. Однако что, если я хочу добавить переходы постепенного увеличения/уменьшения?

Я опробовал пример кастома fadeVisible bindingHandler с нокаут-сайта и понял, как он работает. Однако это будет исчезать и исчезать в текстовых полях одновременно. Если выбрано радио 'MemberId', а пользователь выбирает радио 'MemberUrl', я хочу, чтобы текстовое поле MemberId исчезало до появления текстового поля MemberUrl.

Ниже то, что у меня есть сейчас, и это работает, но я не думаю, что это оптимально. Как еще можно заставить нокаут не выполнять постепенное появление до тех пор, пока не исчезнет предыдущий элемент? Нужен ли мне еще один ko.observale или, возможно, ko.computed?

var viewModel = {
    fadeSpeed: 150,
    who: ko.observable($('input[type=radio][name=Who]:checked').val())
};

ko.bindingHandlers.toggleWho = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        var unwrapped = ko.utils.unwrapObservable(value);
        if (unwrapped === element.name)
            $(element).show();
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var unwrapped = ko.utils.unwrapObservable(value);

        // when selected value is myself, fade out the visible one, if any
        if (unwrapped === 'Myself') {
            $('input[type=text][name=MemberId]:visible')
                .fadeOut(viewModel.fadeSpeed);
            $('input[type=text][name=MemberUrl]:visible')
                .fadeOut(viewModel.fadeSpeed);
        }

            // when selected value is memberid, may need to fade out url first
        else if (unwrapped === 'MemberId') {
            if ($('input[type=text][name=MemberUrl]:visible').length > 0) {
                $('input[type=text][name=MemberUrl]:visible')
                    .fadeOut(viewModel.fadeSpeed, function () {
                        $('input[type=text][name=MemberId]')
                            .fadeIn(viewModel.fadeSpeed);
                    });
            } else {
                $('input[type=text][name=MemberId]')
                    .fadeIn(viewModel.fadeSpeed);
            }
        }

            // when selected value is memberurl, may need to fade out id first
        else if (unwrapped === 'MemberUrl') {
            if ($('input[type=text][name=MemberId]:visible').length > 0) {
                $('input[type=text][name=MemberId]:visible')
                    .fadeOut(viewModel.fadeSpeed, function () {
                        $('input[type=text][name=MemberUrl]')
                            .fadeIn(viewModel.fadeSpeed);
                });
            } else {
                $('input[type=text][name=MemberUrl]')
                    .fadeIn(viewModel.fadeSpeed);
            }
        }
    }
};

ko.applyBindings(viewModel);