slideUp() no trabaja correctamente

[ymolinay]

Hola,

Tengo una tabla en html, a la cual quiero aplicar el efecto de .slideUp(); sobre el tbody, pero algo anda mal. Cuando llamo a la función, el tbody sí se oculta, pero de golpe y cuando le pongo tiempo a la función ocurre lo mismo, sólo que luego de haber transcurrido el tiempo que indiqué, se cierra de golpe y no hace el efecto de ocultarse a pocos como lo quiero.

Código HTML:

<table>
    <thead>
        <tr>
            <th colspan="6">
                <div>
                    PERSONAL
                    <span onclick="hideGrid('#tableGrid');">click</span>
                </div>
            </th>
        </tr>
        <tr>
            <th>ID</th>
            <th>NOMBRES</th>
            <th>APELLIDOS</th>
            <th>DNI</th>
            <th>TELEFONO</th>
            <th>EMAIL</th>
        </tr>
    </thead>
    <tbody id="tableGrid">
        <tr>
            <td>1</td>
            <td>Yrving Heysen</td>
            <td>Molina Yriarte</td>
            <td>72608054</td>
            <td>952506185</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Yrving Heysen</td>
            <td>Molina Yriarte</td>
            <td>72608054</td>
            <td>952506185</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table> 

y la función es:

Código Javascript:

function hideGrid(id) {$(id).slideUp("slow");}
//he probado también con:
function hideGrid(id) {$(id).slideUp(700);}
 

Algún consenjo?

PD: no sé si es necesario, pero la tabla original tiene bootstrap y es la siguiente:

Código HTML:

<table id="tbl_personal" class="table table-striped table-condensed table-bordered">
                <thead>
                    <tr>
                        <th style="text-align: left; font-size: 14px;" colspan="6">
                            <div>
                                &nbsp;
                                <span class="glyphicon glyphicon-list"></span>
                                PERSONAL
                                <span onclick="hideGrid('#tableGrid');" class="glyphicon glyphicon-chevron-down" style="cursor: pointer; float: right;"></span>
                            </div>
                        </th>
                    </tr>
                    <tr>
                        <th id="fld_idPersonal">
                            ID&nbsp;
                            <span class="glyphicon glyphicon-sort-by-attributes"></span>
                        </th>
                        <th id="fld_nombres">
                            NOMBRES&nbsp;
                            <span class="glyphicon glyphicon-sort-by-attributes"></span>
                        </th>
                        <th id="fld_apellidos">
                            APELLIDOS&nbsp;
                            <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                        </th>
                        <th id="fld_dni">
                            DNI&nbsp;
                            <span class="glyphicon glyphicon-sort-by-attributes"></span>
                        </th>
                        <th id="fld_telefono">
                            TELEFONO&nbsp;
                            <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                        </th>
                        <th id="fld_email">
                            EMAIL&nbsp;
                            <span class="glyphicon glyphicon-sort-by-attributes"></span>
                        </th>
                    </tr>
                </thead>
                <tbody id="tableGrid">
                    <tr>
                        <td>1</td>
                        <td>Yrving Heysen</td>
                        <td>Molina Yriarte</td>
                        <td>72608054</td>
                        <td>952506185</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Yrving Heysen</td>
                        <td>Molina Yriarte</td>
                        <td>72608054</td>
                        <td>952506185</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td style="text-align: center; font-size: 14px;" colspan="6">
                            <div>
                                &nbsp;
                                <span class="glyphicon glyphicon-fast-backward"></span>
                                <span class="glyphicon glyphicon-backward"></span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                Página 1 de 1
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-forward"></span>
                                <span class="glyphicon glyphicon-fast-forward"></span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <select class="gridselect" name="limitGrid">
                                    <option>10</option>
                                    <option>15</option>
                                    <option>30</option>
                                </select>
                                <span style="float: right;">Mostrando 1 - 3 de 3</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>