Скрыть / показать, используя jquery, что приводит к странным эффектам - PullRequest
Новая
       23

Скрыть / показать, используя jquery, что приводит к странным эффектам

0 голосов
/ 05 августа 2011

Я пытаюсь передвинуть текстовое поле и метку в таблице., Ползунковый переключатель работает нормально, но эффект не работает гладко, когда флажок установлен в текстовом поле, и метка становится видимой странным образом, она переключается справа и затем оставляет зазор между полями, зазор увеличивается каждый раз, когдафлажок установленНиже приведен код: 

<script type="text/javascript">

$(document).ready(function () {
    var $startdates = $('#startDates');
    var $endDates = $('#endDates');
    $startdates.hide();
    $endDates.hide();

    $('#all').click(function () {
        $startdates.slideToggle('slow');
        $endDates.slideToggle('slow');
        return false;

    });
});
 </script>


<tr id="startDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.StartDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.StartDate) %>
            <%: Html.ValidationMessageFor(model => model.StartDate) %>
        </div>
        </td>
        </tr>

        <tr id="endDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.EndDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.EndDate) %>
            <%: Html.ValidationMessageFor(model => model.EndDate) %>
        </div>
        </td>
        </tr><tr></td>
        <td><input type="checkbox" name="All" id="all" /><label>All</label></td>
        </tr>

Ответы [ 2 ]

1 голос
/ 05 августа 2011
Элемент

Toggle tr и td не рекомендуется, особенно если вы используете эффект ( не используйте эффект для tr !)

Попробуйте отобразить ваши элементы:

Заменить .slideToggle() на .show() или, если он не работает, на .css('display', 'table-row')

1 голос
/ 05 августа 2011

Дайте .editor-label и .editor-field высоту, используя CSS или javascript.

Если высота не задана, функция animate будет работать неправильно, поскольку jQuery должен будет угадать, что высота увеличивается / увеличивается до.

...