jQuery slideDown effect not working

Question

I have a table with countries data. For each row there is an edit button, when clicked, the row disappears and a form wrapped in a div is to appear with a slide down effect. I am trying to apply slideDown() in this div. However, it is not working.

Here's an adapted fiddle .

My script:

$(document).on('click', '.glyphicon-pencil', function(event) {
    var row = $(this).closest('tr');
    var id = row.find("input[name='edit-id']").val();
    $.get('/country/' + id + '/edit', function(data) {
        row.html(data['html']).find('div').slideDown('400');
    });
});

data['html'] contains the rendered form, .glyphicon-pencil is the edit button in each row.

HTML sample before pressing the edit button:

<table class="table table-striped table-responsive">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Continente</th>
                <th>Capital</th>
                <th>Lengua</th>
                <th>Habitantes</th>
                <th>Moneda</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>asdfasdfsdfsf</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>0</td>
                    <td></td>
                    <td>
                        <form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
                            <span class="glyphicon glyphicon-pencil btn btn-xs btn-success"></span>
                            <input name="edit-id" value="1" type="hidden">
                        </form>
                    </td>
                    <td>
                        <form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
                            <span class="glyphicon glyphicon-remove btn btn-xs btn-danger"></span>
                            <input name="id" value="1" type="hidden">
                        </form>
                    </td>
                </tr>

        </tbody>
    </table>

HTML sample after the edit button is pressed:

<table class="table table-striped table-responsive">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Continente</th>
                <th>Capital</th>
                <th>Lengua</th>
                <th>Habitantes</th>
                <th>Moneda</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
    <tr><td colspan="0">
    <div style="" class="row">
        <div style="" class="form-group col-md-12">
            <div style="" class="col-md-2">
                <label for="name" class="control-label">Nombre</label>
            </div>
            <div style="" class="col-md-10">
                <input class="form-control" autocomplete="off" placeholder="Nombre del país" id="update-name" name="name" value="asdfasdfsdfsf" type="text">
            </div>
        </div>
        <div style="" class="form-group col-md-12">
            <div style="" class="col-md-2">
                <label for="continent" class="control-label">Continente</label>
            </div>
            <div style="" class="col-md-10">
                <input class="form-control" autocomplete="off" placeholder="Continente donde se encuentra" id="update-continent" name="continent" value="" type="text">
            </div>
        </div>
        <div style="" class="form-group col-md-12">
            <div style="" class="col-md-2">
                <label for="capital" class="control-label">Capital</label>
            </div>
            <div style="" class="col-md-10">
                <input class="form-control" autocomplete="off" placeholder="Ciudad capital" id="update-capital" name="capital" value="" type="text">
            </div>
        </div>
        <div style="" class="form-group col-md-12">
            <div style="" class="col-md-2">
                <label for="language" class="control-label">Lengua</label>
            </div>
            <div style="" class="col-md-10">
                <input class="form-control" autocomplete="off" placeholder="Lengua oficial" id="update-language" name="language" value="" type="text">
            </div>
        </div>
        <div style="" class="form-group col-md-12">
            <div style="" class="col-md-2">
                <label for="population" class="control-label">Habitantes</label>
            </div>
            <div style="" class="col-md-10">
                <input class="form-control" autocomplete="off" placeholder="Número total de habitantes" id="update-population" name="population" value="0" type="text">
            </div>
        </div>
        <div style="" class="form-group col-md-12">
            <div style="" class="col-md-2">
                <label for="currency" class="control-label">Moneda</label>
            </div>
            <div style="" class="col-md-10">
                <input class="form-control" autocomplete="off" placeholder="Moneda que se usa" id="update-currency" name="currency" value="" type="text">
            </div>
        </div>
        <div style="" class="form-group col-md-12">
            <span class="glyphicon glyphicon-floppy-disk btn btn-success"></span>
            <span class="glyphicon glyphicon-ban-circle btn btn-primary"></span>
            <input name="update-id" value="1" type="hidden">
        </div>
    </div>
</td></tr>

        </tbody>
    </table>

Answer 1

slideDown() is used to display a selected element and will not apply effect on elements that are already displayed. You need to hide those desired elements before using slideDown() :

$(document).on('click', '.glyphicon-pencil', function(event) {
    var row = $(this).closest('tr');
    var id = row.find("input[name='edit-id']").val();
    $.get('/country/' + id + '/edit', function(data) {
        row.html(data['html']).find('div.row').hide().slideDown('400');
    });
});

http://jsfiddle.net/WD8X3/1/