how to "blink" with newly added service in another section

<section class="combine-list-container" data-bind="visible: combineSchedules()">
    <ul>
        <!-- ko foreach: combinedCriteria -->
        <li>
            <span class="icon-delete" data-bind="click: $parent.deleteCombinedSelection"></span>
            <span data-bind="text: service.Name"></span>
            <span><span class="min emp" data-bind="text: service.Duration, visible: false"></span></span>
        </li>
        <!-- /ko -->
    </ul>
</section>
<section data-bind="visible: isServiceSectionVisible">
    <!-- ko foreach: filteredSerivces -->
    <header>
        <span data-bind="text: ServiceTypeName"></span>
    </header>
    <ul data-bind="foreach: GroupedServices">
        <li style="height:100%;" class="service">
            <a href="" data-bind="text: Name,click: $root.setServiceId.bind($data, Id), css: { 'activeservice': $root.selectedServiceId()==Id && $root.combineSchedules()==0 }"></a>
        </li>
    </ul>
    <!-- /ko -->
</section>

What I want to do, is when user clicks on some service in filtered services section, as it works now, to add it in above section combinedCriteria, but to show short effect with some background graying, and then back as it was.

function setServiceId(serviceId) {
            var helperId = serviceId;
            vm.selectedServiceId('');
            vm.selectedServiceId(helperId);
            vm.selectedServiceId(serviceId);
        }

serviceIdSubscrier = vm.selectedServiceId.supsendableSubscribe(changeServiceId);

        function changeServiceId() {
            var currentService = getService();
            if (vm.combineSchedules()) {
                var isShownMessage = null;
                if (vm.combinedCriteria().length > 4 && isShownMessage != true) {
                    var isShownMessage = true;
                    if (isShownMessage) {
                        var style = getDialogStyle();
                        theDialog = dialog.showMessage(vm.moreThen5SchedulesMessage(), ' ', [shell.cancelButtonText()], false, {
                            style: style
                        }).then(function (dialogResult) {
                            closeDialogForMoreThan5();
                            isShownMessage = false;
                        });
                    }
                   
                    
                }
                else {
                    vm.selectedService(currentService || {});
                    refreshAllowedTimes().then(function () {
                        setTimeByPreviousSelection();
                        checkToPushCriteria();
                    });
                }
               
            } else {
                refreshOnServiceType();
            }
        }       

function checkToPushCriteria() {
    //if (vm.combinedCriteria().length > 4) {
    //    var style = getDialogStyle();
    //    theDialog = dialog.showMessage(vm.moreThen5SchedulesMessage(), ' ', [shell.cancelButtonText()], false, {
    //        style: style
    //    }).then(function (dialogResult) {
    //        closeDialogForMoreThan5();
    //    });
    //}
    //else {
        if (vm.selectedService().Id) {
            vm.combinedCriteria.push({
                service: vm.selectedService() || {}
            });
            if (vm.combineSchedules() == 1) {
                withSuspendition(employeeIdSubscriber, function () {
                    vm.employeeId('');
                });
            }
            vm.selectedService({});

            refreshCurrentDate();

        }
    //}
}    

so basically, in the function called checkToPushCriteria() I need to catch event when it adds to an array: vm.combinedCriteria.push({service: vm.selectedService() || {}});

I would probabaly add something like jQuery(".someclass").css('background', 'red'); But I dont know which class is it (unkown identifier), also I dont know how to put highlight background color for some period of time (for example 0.5 seconds)