HIghlight td cell with faded div

With background set to an image UI's Highlight effect on the checkbox cells transits from maroon, to white, to transparent. This is posted at StackOverflow at:

HTML

<script src="http://www.eventidewebdesign.com/public/jquery-ui-1.8.9.custom.min.js"></script>
<form id="addClassesToDoc" action="">
    <table id="classesTable" style="border-collapse: collapse" cellpadding="3">
        <thead>
            <tr style="background-color: #a04a56; color: #ffffff;">
                <td width="30px"></td>
                <td width="75px"><b>Class<br />Number</b></td>
                <td width="500px"><b>Class Name</b></td>
            </tr>
        </thead>
        <tbody>
            <tr bgcolor="#EFE5D3">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="45" /></td>
                <td>PHB7075</td>
                <td>Organizational Systems and Leadership </td>
            </tr>
            <tr bgcolor="">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="126" /></td>
                <td>TEST111</td>
                <td>Test add new class</td>
            </tr>
        </tbody>
    </table>
    <input type="submit" id="submitAddClassesToDoc" name="submitAddClassesToDoc" class="docAdminFormSubmit" value="Add Checked Classes" />
</form>

CSS

body {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px;
    background-image: url('http://www.eventidewebdesign.com/public/bg.png');
    background-repeat: repeat; }
/* For checkbox highlight adjustment */
td { position: relative; }
.checkwrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #A04A56;
}

JavaScript

$(function() {
    $('.checkwrap').position({
        'my': 'left top',
        'at': 'left top',
        'of': $('#classesTable td:eq(2)')
    });
    var buttonClicked;
    $('.docAdminFormSubmit').click(function() {
        buttonClicked = $(this).attr('name');

        //alert('buttonClicked: ' + buttonClicked);
        if (buttonClicked == 'submitAddClassesToDoc') {
            AddClassesToDoc();
            return false;
        }
    }); // End submit button function call

    function AddClassesToDoc() {
        var classesToAddToDoc;
        //alert('number of checkboxes checked: ' + $('input.chkAddClass:checked').length);
        if ($('input.chkAddClass:checked').length) {
            // At least one class checked
            // Get the id(s) of the checked class(es)
            classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function() {
                return $(this).val(); // probably want .val() over .attr('value')
            }).get();
        } else {
            // No class checked
            //alert('Please check at least one class to add to the selected document.');
            $('#classesTable input:checkbox').wrap('<div style="position: relative"/>').parent().append('<div class="checkwrap" />');
            $('#classesTable .checkwrap').fadeOut(1000, function() {
                $(this).unwrap().remove();
            });
            //$('#classesTable input:checkbox').parent().effect('highlight',{color: '#A04A56'},1500);
            return false;
        }
    }
});