How I apply slideDown() together with load()

Question

I have a page, where it displays dynamic content using the load(). How to apply the effect slideDown() when document is displayed on page?

My code is like this:

index php.

<div class="col-md-3">
    <div class="panel panel-primary">
        <div class="panel-heading">
            Documentos
        </div>
        <div class="panel-body">
            <div class="list-group">
                <a href="#" class="list-group-item" data-page="2" title="Todos">Todos</a>
                <a href="#" class="list-group-item" id="nread" data-page="0" title="Não lidos">Não lidos<span class="badge"><?php echo $new_doc ?></span></a>
                <a href="#" class="list-group-item" data-page="1" title="Lidos">Lidos</a>
            </div>
        </div>
    </div>
</div>        
    <div class="col-md-9">
       <div class="panel panel-primary">
         <div class="panel-heading">
            <span id="page-title">Todos</span>
         </div>
       <div class="panel-body">
          <table class="table table-bordered">
             <thead>
                <tr>
                   <th>Enviado em</th>
                   <th>Documento</th>
                   <th>Vencimento</th>
                   <th></th>
                </tr>
             </thead>
            <tbody>
            </tbody>
          </table>
       </div>
    </div>
 </div>

Showfiles.js

$('.list-group a').click(function() {
     $('tbody').load('view/read.php', function() {
            $(this).slideDown();
       });
       $('.list-group-item').removeClass('active');
       $(this).addClass('active');
       $('#page-title').html(title_page);
}

read php.

<tr>
    <td class="1">03/09/2014 14:32:55</td>
    <td>Nome do documento</td>
    <td>10/09/2014</td>
    <td>
        <?php echo "<a href='view/showFile.php?token=" . $token . "&reg=" . $result['reg'] . "' title='Vizualizar' target='_blank' class='btn btn-default view' data-toggle='tooltip' data-placement='top'><span class='glyphicon glyphicon-open'></span></a>" ?>
        <span><?php echo "<a href='action/downloadFile.php?token=" . $token . "&reg=" . $result['reg'] . "' title='Download' class='btn btn-default download' data-toggle='tooltip' data-placement='top'><span class='glyphicon glyphicon-download-alt'></span></a>" ?></span>
    </td>
</tr>

Answer 1

You must use the callback of the .load().

Example:

$('tbody').load('view/read.php', function() {
  $(this).slideDown()
});

Callback is a function which is called by the jQuery method itself. That way the element receives the new content and only then does the slideDown.

Within this function the code will be run once per element that is in the selector before the .load(), that is to say $('tbody'), and the this shall be attributed to that item(s)).