jQuery highlight effect on table row

Question

I have a table that look something like this:

<table id="tblBranchCoverage">
    <thead>...</thead>
    <tbody>
        <tr class="coverageRow">
            <td class="countyCovered">
                <label="branchCountyCovered coverageDisplay">Barrow</label>
                ...
            </td>
            <td>
                ...
            </td>
        </tr>
        <tr class="coverageRow">
            <td class="countyCovered">
                <label="branchCountyCovered coverageDisplay">Cook</label>
                ...
            </td>
            <td>
                ...
            </td>
        </tr>
    </tbody>
</table>

I'm trying to apply the highlight effect on a row found by looking for the text of a label in the row.

Selectors I've tried include:

$('#tblBranchCoverage tr label:contains("Barrow")').parent().parent().effect('highlight', {color: '#88AAFF'}, 1500);
$('label:contains("Barrow")').parents('tr').effect('highlight', {color: '#88AAFF'}, 1500);

Both of the selectors above find the correct row, as determined in the console, but I'm getting this error "TypeError: Object [object Object] has no method 'effect'".

What's the correct way to apply the effect on the selected row?

Answer 1

.effect() is part of jQuery UI - http://jqueryui.com/effect/

You need to include the jquery ui js file in order for it to work.