jQuery向下滑动而不是向下滑动

Question

The slide down effect is not working. It shows the element but it does not, 'slide down'.

HTML:

        <div class='settings'>
            <h4>Account Settings</h4>
            <table class='options'>
                <tr>
                    <td class='name username'>Name</td>
                    <td class='value'>Robert Rocha</td>
                    <td class='edit editName'><a href='#'>Edit</a></td>
                </tr>
                <!-- edit name -->
                <tr class='hidden name-edit'>
                    <td colspan='3'>
                        <table class='edit-name'>
                            <tr>
                                <td class='first'><label for='fname'>First</label></td>
                                <td><input type='text' name='fname' class='fname' id='fname'></td>
                            </tr>
                            <tr>
                                <td class='last'><label for='lname'>Last</label></td>
                                <td><input type='text' name='lname' class='lname' id='lname'></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td colspan='2'class='commit'><a href='#' class='save'>Save</a><a href='#' class='cancel'>Cancel</a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class='name email'>Email</td>
                    <td class='value'>tom@gmail.com</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <!-- edit email -->
                <tr  class='hidden'>
                    <td colspan='3' class='edit-email'><label for='email'>Email</label><input type='email' name='email' id='email'><a href='#' class='save'>Save</a><a href='#' class='cancel'>Cancel</a></td>          
                </tr>
                <tr>
                    <td class='name pword' colspan='2'>Password</td>
                    <td class='edit'><a href='#'>Edit</a></td>
                </tr>
                <!-- edit password -->
                <tr  class='hidden'>
                    <td colspan='3' class='edit-password'><label for='pword'>Password</label><input type='password' name='pword' id='pword'><a href='#' class='save'>Save</a><a href='#' class='cancel'>Cancel</a></td>
                </tr>
                <tr>
                    <td class='name remove-all' colspan='3'><a href='#'>Delete All Photos</a></td>
                </tr>
                <tr>
                    <td class='name remove-account' colspan='3'><a href='#'>Delete Account</a></td>
                </tr>
            </table>

        </div>
        <!-- end settings -->

CSS:

.hidden { display: none; }

/* Settings */

.settings {
    width: 650px;
    margin: 0 auto;
    padding: 1em;
}

.settings h4 {
    padding: 1em 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #cacece;
}

table {
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 200;
}

table.options { 
    width: 100%;
    table-layout: fixed;
}

.options tr { border-bottom: 1px solid #cacece; }
.options td { padding: 0.5em 0; }
.options .edit { text-align: right; }
.options .name { font-weight: bold; }
.options .remove-all, .options .remove-account { font-weight: 200; }

/* Edit Name Table */

table.edit-name {
    width: 300px;
    font-size: 0.9rem;
    margin: 0 auto;
}

.edit-name tr { border: none; }
.edit-name .save, .cancel { margin-left: 10px; }

/* Edit Table */

input[type='email'],
input[type='password'],
.edit-email .save,
.edit-email .cancel,
.edit-password .save,
.edit-password .cancel
{ margin-left: 15px; }

.edit-email, .edit-password { text-align: center; }

jQuery:

$('.options .editName a').on('click', function(e) {
    e.preventDefault();
    $('.name-edit').slideDown('slow');
});

Result: https://jsfiddle.net/ekL6450a/

Answer 1

Animations are not supported on table rows, you can consider to wrap your table in a div and apply the animation on that div .

From "Learning jQuery"

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

Answer 2

You're working with tables... Switch to a tableless approach and it'll work. I've updated your fiddle with an example:

Html

<div class='settings'>
            <h4>Account Settings</h4>
      <div class="options">
        <span class="name username">Name</span>
        <span class="value">Robert Rocha</span>
        <span class="edit editName"><a href="#">Edit</a></span>
      </div>
      <div class="hidden name-edit">
        <div>
          <label for='fname'>First</label><br>
          <input type='text' name='fname' class='fname' id='fname'><br>

        </div>
      </div>
</div> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>

Javascript

$('.options .editName a').on('click', function(e) {
    e.preventDefault();
    $(this).parent().parent().next('.name-edit').slideToggle('slow');
});

Answer 3

the problem is with the nature of TR tag. slideDown works well with elements that is of display:block;

Just for fun, if you add

tr{
    display: block;
}

before the css for your .hidden, you will realize that slideDown works.

see fiddle enter link description here