Highlighting a new row in datatable ajax sourced data

blips

I'm tryng unsuccessfully to highlight a new row added to a datatable:

$('#userList').DataTable({            
            serverSide: true,
        serverMethod: "GET",
        ajaxSource: base + "admin/users/users_list/showusers",      
            order: [ 0, "desc" ],    
            aoColumns: [
                {bVisible:false},                                  
                {data: null,
                render: function (data, type, row){
                if(row[2] === '4'){
                    return '<span class="text-lt">'+row[1]+'</span>';
                } else {
                    return row[1];
                }   
                }
                },
                {data: null,
                render: function (data, type, row){
                if(row[2] === '1'){
                    return '<span class="label label-black">'+selectUG1+'</span>';
                } 
                else if(row[2] === '2') {
                    return '<span class="label label-primary">'+selectUG2+'</span>'
                }
                else if(row[2] === '3') {
                    return '<span class="label label-success">'+selectUG3+'</span>'
                }
                else if(row[2] === '4') {
                    return '<span class="label label-danger">'+selectUG4+'</span>'
                } 
                }
                },
                null,
                {data:4,
                render: function(data, type, row){
                    return (moment(data).format("DD/MM/YYYY"));
                 }
                },
                {data:5,
                render: function(data, type, row){
                    return (moment(data).format(tableDateTimeFormat));
                 }
                },
                {bSortable: false, className: 'all', 
                data: 6,
                render: function(data, type, full, meta){
                    return '<a href="'+base+'admin/users/edit_user/userid/'+data+'" class="animsition-link table-icon" data-toggle="tooltip" data-original-title="'+tooltipEdit+'">\
                            <span class="fa-stack">\
                            <i class="fa fa-square fa-stack-2x"></i>\
                            <i class="fa fa-edit fa-stack-1x fa-inverse"></i>\
                            </span>\
                            </a>\
                            <a href="#" id="'+data+'" class="table-icon red-icon delete" data-toggle="tooltip" data-original-title="'+tooltipDelete+'">\
                            <span class="fa-stack">\
                            <i class="fa fa-square fa-stack-2x"></i>\
                            <i class="fa fa-trash fa-stack-1x fa-inverse"></i>\
                            </span>\
                            </a>';}
                }
            ]            
        });

I'm using the following method:

$.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: $form.serialize(),
            success:function(response){
                if(response.success){                       
                    usertable.rows.add([                           
                    ]).draw().nodes().to$().addClass('animated fadeIn').effect('highlight',{},3000); 
                    toastr.success(userAddSuccess)
                }                    
                $form.parents('.bootbox').modal('hide');               
            }
        });
    }, 3000);

The row is added without the wished effect, where do I go wrong?