Проблема с анимацией jQuery

Question

Я довольно новичок в jQuery и у меня проблемы с анимацией, которую я хотел бы сделать.

Скажем, у меня есть несколько выпадающих списков для фильтрации контента, использующего этот HTML:

<table class="calFilter">
    <tr>
        <th>
            <label for="ddlDept">Show events hosted by:</label>
        </th>
        <th>
            <label for="ddlEventType">Select event type:</label>
        </th>
    </tr>
    <tr>
        <td>
            <select name="ddlDept" id="ddlDept" class="deptDropDown">
                <option value="">All</option>
                <option value="cfys">Community, Family, &amp; Youth Services</option>
                <option value="conser">Conservation Board</option>
                <option value="emergm">Emergency Management</option>
                <option value="health">Health Department</option>
            </select>
        </td>
        <td>
            <select name="ddlEventType" id="ddlEventType">
                <option value="0">All</option>
            </select>
        </td>
        <td>
            <input type="submit" name="cmdGo" value="Go" id="cmdGo" />
        </td>
    </tr>
</table>

Если вы выберете другой отдел, типы событий больше не будут иметь смысла, поэтому я хотел бы скрыть метку «Тип события» и раскрыть ее при изменении раскрывающегося списка «Отдел». Я заставил это работать, используя обратный вызов события изменения для выпадающего списка и простую команду hide().

Но если я попытаюсь использовать анимацию, все пойдет не так. Элементы управления перемещаются не так, как я ожидал, анимация происходит каждый раз, даже если элементы управления уже скрыты и т. Д.

Я бы хотел какое-нибудь приятное затухание или скольжение или какую-то комбинацию этих двух. Как бы вы это сделали?

Answer 1

Я думаю, что из-за того, что у вас есть элементы в макете таблицы, анимация выглядит забавно. Чтобы преодолеть это, вы можете скрыть элементы <td>, в которых находятся элементы, которые вы хотите скрыть.

Вот Рабочая демонстрация , которая протестирована и работает в Firefox 3.5 и IE6. Добавьте /edit к URL, если вы хотите поэкспериментировать с ним.

Код из демки

$(function() {

    $('#ddlDept').change(function() {
      var label = $('label[for="ddlEventType"]');

      if (label.is(":visible")) {  
          label.parent().animate({ width: "0px" }).hide().end().hide();
          $('#ddlEventType').parent().animate({ width: "0px" }).hide().end().hide();
      }
    });

});

EDIT:

Как обсуждалось в комментариях, вот Рабочая демонстрация , которая использует fadeTo(), чтобы сначала затухать элементы перед анимацией и скрытием.

код из демки

$(function() {

    $('#ddlDept').change(function() {
      var label = $('label[for="ddlEventType"]');
      var select = $('#ddlEventType');

      if (label.is(":visible")) {  
          label.fadeTo("slow", 0.01, function() { 
                  label.parent()
                       .animate({ width: "0px"}, 500)
                       .hide()
                       .end()
                       .hide(); 
               });
          select.fadeTo("slow", 0.01, function() { 
                  select.parent()
                       .animate({ width: "0px"}, 500)
                       .hide()
                       .end()
                       .hide(); 
               });
      }
    });

});

Answer 2

Таблицы довольно привередливы, когда дело доходит до анимации. fadeOut должно работать с таблицами, вы получите смешанные результаты в разных браузерах со многими другими эффектами.

Answer 3

Вы должны сначала проверить, является ли он видимым или нет:

// Callback function
function() {
    var obj = $(this);
    if (obj.is(':visible')) { // make sure you're checking the visibility of one or both of the objects that are being hidden
        // hide
    } else {
        // show
    }
}

Answer 4

Попробуйте использовать slideDown() вместо hide() или посмотрите одну из множества других встроенных анимаций показа / скрытия на jquery.com

Если он все еще анимируется, пока он скрыт, добавьте что-то вроде этого в свой код:

if($('select#ddlEventType').not(':hidden')){
      $(this).slideDown();
}