jQuery slideDown 效果不起作用

Question

我有一张包含国家数据的表格。每一行都有一个编辑按钮，当点击时，该行会消失，并且会出现一个包含在 div 中的表单，并带有向下滑动的效果。我正在尝试在此 div 中应用 slideDown()。但是，它不起作用。

这是一个改编的fiddle。

我的脚本：

$(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'] 包含呈现的表单，.glyphicon-pencil 是每一行中的编辑按钮。

按下编辑按钮之前的 HTML 示例：

<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 示例：

<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() 用于显示选定的元素，不会对已显示的元素应用效果。在使用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/